HTML5 Semantic Elements Cheat Sheet — Accessibility & SEO Structure
Guide to semantic HTML5 tags (<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>) and ARIA accessibility landmarks.
Document Structure & Landmarks
<main>
Identifies the dominant primary content of the body; must only appear once per page
<article>
Self-contained composition that makes sense on its own (blog post, product card, comment)
<section>
Thematic grouping of content, typically with its own heading (h2-h6)
<aside>
Tangentially related content (sidebar, callouts, author bio, related links)
<nav aria-label="Main Navigation">
Section intended for navigation links with accessibility label
Media & Interactive Tags
<figure><img src="..." alt="..."><figcaption>...</figcaption></figure>
Self-contained visual illustration with accessible caption
<details><summary>FAQ Question</summary><p>Answer</p></details>
Native accordion toggle widget requiring zero JavaScript
<dialog id="modal">...</dialog>
Native HTML5 modal popup supported by showModal() and close() APIs