Semantic HTML Guide • Header, Main, Nav, Section, Article & More

Understand, Implement, and Reap the Real-World Benefits of Meaningful Mark-Up

What Is Semantic HTML?
Core Structural Elements
<header> & <footer>
<main>
<nav>
<section> & <article>
<aside>
<figure> & <figcaption>
Why Use Semantic HTML?
Complete Demo Page (Copy-Ready)
Best-Practice Checklist
Frequently Asked Questions

Read-time: ~12 minutes
Level: Beginner → Intermediate

What Is Semantic HTML? <a id="what-is-semantic-html"></a>

Semantic HTML means choosing tags that describe their content and purpose rather than merely controlling presentation.
Think of it as naming variables correctly in code:

A semantic tag carries meaning that helps:

Browsers create accessibility trees
Search engines understand page structure (SEO)
Assistive technologies announce landmarks for keyboard/screen-reader users
Developers maintain and scale code faster

Core Structural Elements <a id="core-structural-elements"></a>

`<header>` & `<footer>` <a id="header--footer"></a>

Purpose	Typical Contents	Rules
Introduce / conclude a document or section	Logo, site name, navigation, search, legal links, © info	Multiple allowed—one per section or article if needed

<header>
  <h1>CSS Wizardry Blog</h1>
  <nav>…</nav>
</header>

<article>
  <header>
    <h2>Understanding BEM</h2>
    <p>Published 9 June 2025</p>
  </header>
  …
  <footer>
    <p>Tags: CSS, BEM, Methodology</p>
  </footer>
</article>

`<main>` <a id="main"></a>

One per page (enforced by spec).
Contains primary content unique to that view.
Screen-readers offer skip to main shortcuts.

`<nav>` <a id="nav"></a>

Defines major navigation blocks.

Tip: Don’t wrap every list of links in <nav>—only landmark navigation (header, footer, breadcrumbs, sidebar).

`<section>` & `<article>` <a id="section--article"></a>

Element	When to Use	Default Heading Requirement
`<section>`	Thematic grouping of related content	Should start with an `<h*>`
`<article>`	Self-contained piece that can be syndicated (blog post, card, comment)	Should start with an `<h*>`

`<aside>` <a id="aside"></a>

Represents tangential or secondary content:

Sidebars
Pull quotes
Related links

Screen-readers announce “Complementary landmark.”

`<figure>` & `<figcaption>` <a id="figure--figcaption"></a>

Wraps media and an optional caption that belongs to that media.

Use inside articles, tutorials, or even product galleries.

Why Use Semantic HTML? <a id="why-use-semantic-html"></a>

Benefit	Impact
Accessibility (a11y)	Landmarks enable keyboard nav (e.g., “jump to main”). Screen-readers announce roles automatically.
SEO & Rich Snippets	Search engines parse headings/sections for better ranking and sitelinks.
Maintainability	Clear markup replaces cryptic class/id selectors, shrinking CSS and JS complexity.
Forward Compatibility	New devices (cars, smart-TVs) rely on semantics to extract content.

Case Study:
GitHub replaced non-semantic <div id="site-container"> with <main> and saw Lighthouse Accessibility score rise from 83 → 97 without touching CSS.

Complete Demo Page <a id="complete-demo-page"></a>

Paste, run, and inspect the accessibility tree in your browser dev-tools:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Semantic HTML Demo</title>
  <style>
    body{font-family:system-ui;margin:0;line-height:1.6}
    header,footer,nav,main,section,article,aside{padding:1rem}
    header,footer{background:#111;color:#f3f3f3}
    nav ul{display:flex;gap:1rem;list-style:none;padding:0;margin:0}
    article{background:#fafafa;margin:1rem 0;padding:1rem;border-radius:6px}
    aside{background:#fff3cd;border-left:4px solid #ffecb5}
  </style>
</head>
<body>
  <header>
    <h1>Semantic Times</h1>
    <nav aria-label="Primary">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Articles</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main id="main-content">
    <section aria-labelledby="latest-news">
      <h2 id="latest-news">Latest News</h2>

      <article>
        <header>
          <h3>HTML6 Draft Released</h3>
          <p><time datetime="2025-06-09">June 9, 2025</time></p>
        </header>

        <p>The W3C has published the first working draft of HTML6…</p>

        <figure>
          <img src="w3c.jpg" width="650" alt="W3C logo at conference">
          <figcaption>W3C gathering in Geneva.</figcaption>
        </figure>

        <aside aria-label="Key Takeaway">
          <p><strong>Did you know?</strong> HTML6 may introduce native dark-mode tokens.</p>
        </aside>

        <footer>
          <p>Tags: <a href="#">standards</a>, <a href="#">html</a></p>
        </footer>
      </article>
    </section>
  </main>

  <footer>
    <small>&copy; 2025 Semantic Times. All rights reserved.</small>
  </footer>
</body>
</html>

Quick Things to Try

Press Ctrl + F6 (or VoiceOver rotor) to navigate landmarks.
Disable CSS—layout still makes sense.
View in Lighthouse → Accessibility score ~100.

Best-Practice Checklist <a id="best-practice-checklist"></a>

✔ Check	Why
Only one `<main>` per page	Avoids duplicate landmarks
Add `aria-label` to every `<nav>`	Clarifies purpose (Primary, Footer, Breadcrumbs)
Headings should follow logical hierarchy (`h1`→`h2`…)	Screen-readers build outline
Use `<section>` with heading; otherwise, prefer a plain `<div>`	Spec requirement
Avoid generic IDs like `#header` when the element is `<header>`	Redundancy
Group ads, sidebars in `<aside>`	Allows “skip complementary” navigation
Include alt text for images in `<figure>`	a11y & SEO
Keep landmark count low (≤ 7)	Too many confuse users

Frequently Asked Questions <a id="frequently-asked-questions"></a>

❓ Question	💡 Answer
Can I nest `<header>` inside `<article>`?	Yes. Each `article` or `section` can have its own `header`/`footer`—useful for blog post metadata.
Is `<div class="nav">` okay instead of `<nav>`?	`<nav>` is preferable; it conveys role to accessibility APIs without extra ARIA roles.
What’s the difference between `<section>` and `<div>`?	`<section>` requires a heading and signals “this is a thematic grouping.” `<div>` is purely generic.
Will semantic tags break old browsers?	HTML5 elements are supported IE9+. Polyfills (`document.createElement`) cover ancient browsers.
Do I need ARIA roles on semantic elements?	No—roles are implicit (`<nav role="navigation">` is redundant). Add roles only when overriding default behaviour.
How does this improve SEO?	Search engines better detect masthead, body, nav, footnotes, and rich snippets (e.g., article date, author) increasing click-through rates.
Are there performance gains?	Slightly: smaller CSS selectors and shorter DOM traversal in JS. Main win is maintainability.
What about microdata / schema.org?	Semantic HTML is foundation; microdata adds granular meaning (e.g., `itemtype="https://schema.org/Article"`). Combine both for max benefit.
Can I style `<main>` differently from a `<div>`?	Absolutely—use CSS selectors (`main { padding:2rem }`). They behave as standard block elements.
Is over-using semantic tags bad?	Yes—wrapping every paragraph in `<article>` dilutes meaning. Use semantics where appropriate, not everywhere.

Final Thought

Semantic HTML isn’t “extras”—it’s fundamental craftsmanship. Each correctly chosen tag is a hint to browsers, APIs, and users about what the content is, not just how it looks. Adopt it today and future-proof your projects for the expanding web ecosystem. Happy coding! 🎉

Semantic HTML Explained: Why <header>-<footer> & Friends Matter for Accessibility, SEO & Clean Code

Table of Contents

What Is Semantic HTML? <a id="what-is-semantic-html"></a>

Core Structural Elements <a id="core-structural-elements"></a>