Why Semantic HTML?
- SEO: Search engines understand your page structure better, which helps with ranking and rich results
- Accessibility: Screen readers navigate by landmarks — header, nav, main, footer. Without semantics, blind users have no way to jump to the main content
- Maintainability:
<article>is clearer than<div class="article-thing"> - Default styles: Semantic elements come with useful browser defaults for print, reader mode, and accessibility tools
Key Semantic Elements
| Element | Use For |
|---|---|
| <header> | Page or section header — logo, nav, hero |
| <nav> | Navigation links (main nav, breadcrumbs, pagination) |
| <main> | The primary content of the page — only one per page |
| <article> | Self-contained content: blog post, news story, product card |
| <section> | A thematic group of content — should have a heading |
| <aside> | Tangentially related content: sidebar, pull quote, related links |
| <footer> | Page or section footer — copyright, links, contact |
| <figure> | Self-contained media: image, diagram, code block with caption |
| <figcaption> | Caption for a <figure> element |
| <time> | Dates and times — use the datetime attribute for machines |
Page Structure Example
<body>
<header>
<a href="/" class="logo">WebDesign001</a>
<nav aria-label="Main navigation">
<ul>
<li><a href="/design-tools/">Design Tools</a></li>
<li><a href="/seo-tools/">SEO Tools</a></li>
</ul>
</nav>
</header>
<main>
<section aria-labelledby="tools-heading">
<h2 id="tools-heading">Design Tools</h2>
<article>
<h3>CSS Gradient Generator</h3>
<p>Create gradients visually...</p>
<a href="/design-tools/css-gradient-generator/">Open tool</a>
</article>
</section>
<aside>
<h2>Related Guides</h2>
<nav aria-label="Related content">...</nav>
</aside>
</main>
<footer>
<p><small>© 2026 WebDesign001</small></p>
<nav aria-label="Footer navigation">...</nav>
</footer>
</body>When to Add ARIA
ARIA (Accessible Rich Internet Applications) attributes supplement semantic HTML when native semantics aren't enough. The rule is: use semantic HTML first, ARIA only when native HTML can't express the meaning.
<!-- Good: aria-label distinguishes multiple navs -->
<nav aria-label="Main navigation">...</nav>
<nav aria-label="Footer links">...</nav>
<!-- Good: aria-labelledby connects section to heading -->
<section aria-labelledby="design-heading">
<h2 id="design-heading">Design Tools</h2>
</section>
<!-- Good: aria-expanded on toggles -->
<button aria-expanded="false" aria-controls="mobile-menu">Menu</button>