Semantic HTML5: Header, Nav, Main and Footer

What you'll learn

• What semantic HTML means.
• The HTML5 elements for the parts of a page: <header>, <nav>, <main>, <article>, <section>, <aside> and <footer>.
• When a plain <div> or <span> is still the right choice.

The idea

What "semantic" means

Semantic means "about meaning". A semantic element says what its content is, not how it looks. Before HTML5, pages were built from <div> boxes with names in their class:

<div class="header">...</div>
<div class="menu">...</div>
<div class="content">...</div>

People could guess what those boxes were from the class names, but browsers, search engines and screen readers couldn't. HTML5 added elements that say it directly.

The page-structure elements

A typical page looks like this:

┌──────────── header (logo + nav) ────────────┐
├──────────── main ──────────────┬── aside ───┤
│  article                       │  related   │
│    section                     │  links     │
│    section                     │            │
├────────────────────────────────┴────────────┤
└──────────── footer ─────────────────────────┘

Screen readers let people jump straight to these areas (called landmarks), for example "skip to main content", instead of listening to the whole menu on every page.

<div> and <span>: boxes with no meaning

When no semantic element fits and you just need a box to style, use:

• <div> for a block (it starts on a new line), such as a card or a row.
• <span> for a piece of text inside a line, such as one coloured word.

There's nothing wrong with them; just reach for a semantic element first.

Try it

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sam's Garden Blog</title>
  <style>
    header, nav, main, article, aside, footer { border: 2px dashed #94a3b8; padding: 8px; margin: 6px 0; }
    header, footer { background: #e0f2fe; }
    aside { background: #fef9c3; }
  </style>
</head>
<body>
  <header>
    <strong>Sam's Garden Blog</strong>
    <nav>
      <a href="#">Home</a> | <a href="#">Posts</a> | <a href="#">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>Growing tomatoes on a balcony</h1>
      <section>
        <h2>Choosing a pot</h2>
        <p>Pick a pot at least 30 cm deep with drainage holes.</p>
      </section>
      <section>
        <h2>Watering</h2>
        <p>Water every morning in summer, at the base of the plant.</p>
      </section>
    </article>

    <aside>
      <h2>Related posts</h2>
      <p><a href="#">Herbs for small spaces</a></p>
    </aside>
  </main>

  <footer>
    <p><small>&copy; 2026 Sam. Written with HTML5.</small></p>
  </footer>
</body>
</html>

The dashed borders come from the small <style> block so you can see each area. Without CSS, semantic elements look like plain blocks; their value is the meaning they add.

Your turn

1. Add a second <article> inside <main> for another blog post, with its own <h2> title.
2. Add a <nav> inside the footer with links to "Privacy" and "Contact". (A page can have several <nav> elements.)
3. Find a <div> on a website you use (View Page Source) and think about which semantic element would fit better.

Common mistakes

• More than one <main>. A page has exactly one main area.
• Using <section> as a styling box. A section should have a heading and a theme; for plain boxes use <div>.
• Putting every link list in <nav>. Keep <nav> for important navigation blocks.
• Thinking semantic elements change the look. They mostly don't; CSS does the styling.

Key points

• Semantic elements describe what content is: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>.
• They help search engines understand the page and let screen-reader users jump to areas (landmarks).
• Use one <main> per page.
• Use <div> (block) and <span> (inline) only when no meaningful element fits.