Skip to content

Beginner · Forms, semantic HTML and accessibility · topic 12 of 64 · 20 min

Semantic HTML

Explanation

Semantic tags describe what a part of the page is: header, nav, main, article, aside, footer. They look the same as plain boxes, but they help screen readers, search engines and other developers understand the page. Use <div> only when no tag with a meaning fits.

What "semantic" means

Semantic means "about meaning". A semantic tag tells the browser what the content is, not how it looks. <nav> says "these are the main links", while <div> says nothing at all.

Think of it like this: Think of a newspaper. Everyone knows where the masthead, the headlines, the main story, the side column and the bottom notes are. Semantic tags are those labels for a web page, so any reader, human or machine, can find their way.

The main landmark tags

TagMeaning
<header>The top of the page or of a section: logo, title, maybe search
<nav>A block of main navigation links
<main>The main content of this page (only one per page)
<section>A group of related content with its own heading
<article>Something that makes sense on its own: a news story, a product, a comment
<aside>Side content: related links, an advert, a tip box
<footer>The bottom: contact, copyright, small links
html
<body>
  <header>
    <h1>City News</h1>
    <nav>
      <a href="/">Home</a> <a href="/sports">Sports</a>
    </nav>
  </header>
  <main>
    <article>
      <h2>Metro line opens</h2>
      <p>Published <time datetime="2026-03-14">14 March 2026</time></p>
      <p>The new line connects ...</p>
    </article>
    <aside>
      <h2>Related stories</h2>
    </aside>
  </main>
  <footer>
    <p>Contact: news@example.com</p>
  </footer>
</body>
A news page outline with landmark tags

Who benefits

  • Screen reader users can jump straight to <main> or <nav> with one key.
  • Search engines understand which text is the main content.
  • Developers reading your code see the structure at a glance.
  • Browser reading modes can show the article cleanly.

Small semantic tags

<time datetime="2026-03-14"> gives a machine-readable date. <address> holds contact details. <mark> highlights a matching word. <button> is a real button, while a <div> that looks like a button is not.

Tip: A quick test: if you removed all CSS, would the page still make sense as a document? Semantic HTML makes the answer yes.
Careful: Do not wrap everything in <section>. A section should have a heading. When you only need a box for styling, <div> is the honest choice.

Watch the lesson

Semantic HTML · 1/6

Semantic = meaning

Semantic tags describe what a part of the page is, not how it looks.

Prefer a video by a teacher? Find free videos on “semantic html5 tags explained header nav main footer” on YouTube ↗

In real life: An exam results website

A board results site has a <header> with the logo, a <nav> with links to results, notices and contact, a <main> holding the result search form, an <aside> with helpline numbers, and a <footer>. A blind student using a screen reader presses one key to jump to the main landmark and finds the roll number field at once.

Practice (0/2 done)

Task 1 · Code · HTML

Rewrite this page with semantic tags: the top part with the site name and links becomes <header> containing a <nav>, the main content goes in <main>, and the bottom becomes <footer>. There must be exactly one <main>.

Task 2 · Code · HTML

Write a blog post page: a <main> with an <article> that has an <h2> title, a <time> element with a datetime attribute like "2026-05-01", and at least one paragraph.

Quick quiz

Question 1

1.How many <main> elements should a page have?

Question 2

2.A product review that makes sense on its own fits best in...

Question 3

3.Which tag holds the main menu links?

Question 4

4.When is <div> the right choice?

Read more (free)

Pass the quiz (60% or more) or mark this topic as done when you are ready.

Your progress is saved on this device only.

Next: Accessibility basics →

← Previous: Built-in form validation