HTML: Semantic HTML & Accessibility

What you will learn

Semantic HTML uses tags that describe their meaning, not just their appearance. This improves accessibility, SEO, and code readability.

Why semantic tags matter

Screen readers and search engines rely on the structure of your HTML. Compare:

<!-- Non-semantic: tells us nothing about the content -->
<div class="header">Site Title</div>
<div class="nav">Link 1 | Link 2</div>
<div class="main">
  <div class="article">Article content</div>
  <div class="aside">Sidebar</div>
</div>
<div class="footer">Copyright 2026</div>

<!-- Semantic: the tags themselves describe the structure -->
<header>Site Title</header>
<nav>Link 1 | Link 2</nav>
<main>
  <article>Article content</article>
  <aside>Sidebar</aside>
</main>
<footer>Copyright 2026</footer>

Common semantic tags

Tag	Purpose
`<header>`	Introductory content (logo, navigation, heading)
`<nav>`	Navigation links
`<main>`	Primary page content (only one per page)
`<article>`	Self-contained content (blog post, news story)
`<section>`	Thematic grouping of content
`<aside>`	Tangentially related content (sidebar, pull quote)
`<footer>`	Footer information (copyright, links)
`<figure>` / `<figcaption>`	Image with caption
`<time>`	Dates and times

Accessibility basics

<!-- Use headings in order (h1 -> h2 -> h3) -->
<h1>Page Title</h1>
<h2>Section Title</h2>
<h3>Sub-section</h3>

<!-- Always label form inputs -->
<label for="search">Search:</label>
<input type="search" id="search">

<!-- Use ARIA labels when needed -->
<button aria-label="Close dialog">X</button>

Common mistakes

Using <div> for everything — search engines and screen readers cannot understand your page.
Skipping heading levels (going from <h1> to <h3>) — breaks the document outline.
Having more than one <main> element per page.
Forgetting that <nav> is for primary navigation blocks, not every set of links.

Quick check below!