Semantic HTML Elements
Use the right element for the right meaning — header, nav, main, section, article, and more
Knowledge Debt detected
You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.
Explanation
Semantic elements tell the browser (and assistive technology) what the content is, not just how to display it. A <div> is meaningless — a <nav> communicates "this is navigation."
Page-level structure elements:
<body>
<header> <!-- Site header: logo, site nav, search -->
<nav>...</nav>
</header>
<main> <!-- Primary content — only ONE per page -->
<article> <!-- Self-contained content (blog post, product card) -->
<section>...</section>
</article>
<aside> <!-- Supplementary content: sidebar, related links -->
...
</aside>
</main>
<footer> <!-- Footer: copyright, links, contact -->
...
</footer>
</body>Key semantic elements:
| Element | Use when | |---|---| | <header> | Introductory content for a page or section (logo, site nav, search) | | <nav> | A group of navigation links | | <main> | The primary content of the page — use only once | | <article> | Self-contained content that makes sense on its own (blog post, tweet, product) | | <section> | A thematic group of content, usually with a heading | | <aside> | Content tangentially related to the main content (sidebar, callout) | | <footer> | Footer for the page or a section | | <figure> + <figcaption> | Self-contained media with a caption |
Semantic vs non-semantic:
html <!-- Non-semantic — div soup --> <div class="header"> <div class="nav">...</div> </div> <div class="content"> <div class="article">...</div> </div> <!-- Semantic — meaning is in the markup --> <header> <nav>...</nav> </header> <main> <article>...</article> </main>
Semantic HTML improves: SEO (search engines understand your structure), accessibility (screen readers navigate by landmarks), and maintainability (other developers understand the intent).
Examples
Blog page with semantic structure
Each element communicates its role to browsers, search engines, and screen readers without a single class name
<body>
<header>
<a href="/">My Blog</a>
<nav>
<a href="/posts">Posts</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h1>How I Learned HTML in 30 Days</h1>
<p>Posted <time datetime="2026-06-01">June 1, 2026</time></p>
<section>
<h2>Week 1: The Basics</h2>
<p>I started with document structure...</p>
</section>
<section>
<h2>Week 2: Semantic Elements</h2>
<p>Then I learned about nav, main, and article...</p>
</section>
</article>
<aside>
<h2>Related Posts</h2>
<ul>
<li><a href="/css">CSS Next Steps</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 My Blog. All rights reserved.</p>
</footer>
</body>Figure with caption
`<figure>`, `<time>`, and `<address>` are semantic elements with specific meanings browsers and search engines understand
<!-- figure groups media with its caption -->
<figure>
<img src="architecture-diagram.png" alt="Three-tier web architecture diagram" />
<figcaption>Figure 1: Client, server, and database layers</figcaption>
</figure>
<!-- time with machine-readable datetime -->
<p>Last updated <time datetime="2026-06-27">June 27, 2026</time></p>
<!-- address for contact information -->
<address>
Written by <a href="mailto:bill@atomlearn.dev">Bill Piazzetta</a>
</address>How well did you understand this?
Next in HTML
Text, Links & Images