Semantic HTML: header, nav, main, article, section and footer

Semantic HTML means using elements like header, nav, main, article, section, aside and footer that describe what content is, which helps SEO, accessibility and your code.

What does semantic HTML mean?

"Semantic" means "about meaning". A semantic element tells the browser what its content is, not just how it looks. <nav> says "this is navigation". <footer> says "this is the footer". A plain <div> says nothing at all.

Think of a supermarket. Signs like "Bakery", "Fruit" and "Checkout" help you find things fast. Semantic elements are signs for your page. Screen readers (software that reads the page aloud for blind users), search engines and other developers all use these signs.

Many of these elements are also called landmarks. Screen reader users can jump straight from one landmark to the next, like jumping between chapters.

The main page landmarks and when to use them

• <header>: the introduction to a page or a section. The page header usually holds the logo, site name and main navigation. An article can also have its own header with its title and date.
• <nav>: a block of important navigation links, like the main menu. You don't need it for every group of links; a few links in the footer are fine without it.
• <main>: the main content of the page, the part that is different on every page. Use only one visible <main> per page, and don't put the site header or footer inside it.
• <article>: a complete, self-contained piece of content that would still make sense on its own. Examples: a blog post, a news story, a product card, a user comment.
• <section>: a themed group of content inside a page or article, usually with its own heading. Examples: "Features", "Pricing", "Reviews".
• <aside>: content that is related but not essential, like a sidebar, a "related posts" box or an author bio.
• <footer>: the closing part of a page or section. It often holds copyright, contact details and small links.

Article vs section: what is the difference?

This is the question everyone asks. Use this simple test: could you copy this content to another website and it would still make sense alone? If yes, use <article>. A blog post makes sense on its own, so it is an article.

If the content is just one part of something bigger, use <section>. The "Ingredients" part of a recipe does not make sense alone, so it is a section of the recipe article. Articles can contain sections, and sections can contain articles (for example, a "Latest news" section holding three news articles).

Common mistake: Using <section> as a replacement for every <div>. A section should be a real, meaningful part of the content and normally has a heading. If you only need a box for styling, use a <div>.

A full blog page layout example

Here is a complete blog page built only with semantic elements. Look at how each part has a clear job.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>How to Grow Tomatoes on a Balcony - Small Garden Blog</title>
</head>
<body>
  <header>
    <p><a href="/">Small Garden Blog</a></p>
    <nav aria-label="Main">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/posts">All posts</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>How to Grow Tomatoes on a Balcony</h1>
        <p>By Maria Lopez, <time datetime="2026-05-12">12 May 2026</time></p>
      </header>

      <p>You don't need a big garden to grow tasty tomatoes. A sunny balcony is enough.</p>

      <section>
        <h2>What you need</h2>
        <ul>
          <li>A pot at least 30 cm deep</li>
          <li>Good compost</li>
          <li>A cherry tomato plant</li>
        </ul>
      </section>

      <section>
        <h2>Watering tips</h2>
        <p>Water every morning in summer, and always water the soil, not the leaves.</p>
      </section>

      <footer>
        <p>Tags: vegetables, balcony, beginners</p>
      </footer>
    </article>

    <aside>
      <h2>Related posts</h2>
      <ul>
        <li><a href="/posts/herbs">Easy herbs for your kitchen window</a></li>
        <li><a href="/posts/compost">Compost basics</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2026 Small Garden Blog</p>
    <p><a href="/contact">Contact</a> · <a href="/privacy">Privacy</a></p>
  </footer>
</body>
</html>

In the browser this looks like plain stacked text for now, because there is no CSS yet. But the structure is already clear: the site header and menu at the top, the article in <main>, related links in <aside>, and the site footer at the bottom. Notice that the article has its own small header and footer, too. The aria-label on <nav> gives the menu a name for screen readers.

Note: The HTML standard also has a newer <search> element for wrapping a search form. It works in all modern browsers and is a good choice for a site search box.

Why semantic HTML helps SEO and screen readers

• Accessibility: screen readers announce "navigation", "main", "article" and let users jump between them. This saves time for millions of people.
• SEO: search engines understand which part is the real content and which part is menus and footers.
• Cleaner code: you and your team can understand the page faster. <footer> is easier to read than <div class="bottom-part-2">.
• Free features: browsers' reader modes and tools like voice assistants work better with semantic pages.

Practice exercise

Build a simple recipe page using semantic HTML. Include a page <header> with the site name and a <nav>, a <main> with one <article> for the recipe, two <section> elements ("Ingredients" and "Method"), an <aside> with a cooking tip, and a page <footer>.

Hint: Ask "could this stand alone?" for each part. The recipe can, so it is the article. The ingredients cannot, so they are a section.

Frequently asked questions

Can a page have more than one header and footer?

Yes. You can have one header and footer for the whole page, and others inside each article or section. Only <main> should appear once.

Does semantic HTML change how my page looks?

Almost not at all. Semantic elements look like plain blocks by default. You control the look with CSS. Their value is in meaning, not style.

Should I put nav inside header?

It is common and fine, but not required. A <nav> can sit anywhere it makes sense, such as in a sidebar.

Key takeaways

• Semantic elements describe what content is: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>.
• Use <article> for content that stands alone and <section> for a themed part with a heading.
• Use only one visible <main> per page.
• Semantic HTML helps screen reader users, search engines and other developers.