The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Mark the page header | <header><h1>Documentation</h1></header> | View examples |
| Mark primary navigation | <nav aria-label="Primary">
<a href="/docs/">Docs</a>
</nav> | View examples |
| Mark the main content | <main id="main-content"></main> | View examples |
| Mark the page footer | <footer><small>Copyright 2026</small></footer> | View examples |
| Create a standalone article | <article><h2>Release notes</h2></article> | View examples |
| Create a named section | <section aria-labelledby="setup-title">
<h2 id="setup-title">Setup</h2>
</section> | View examples |
| Mark related content | <aside aria-labelledby="related-title">
<h2 id="related-title">Related</h2>
</aside> | View examples |
| Name the page | <h1>Deployment guide</h1> | View examples |
| Name a subsection | <h3>Environment variables</h3> | View examples |
| Caption a figure | <figure>
<img src="chart.svg" alt="">
<figcaption>Monthly requests</figcaption>
</figure> | View examples |
| Encode a date | <time datetime="2026-08-12">August 12, 2026</time> | View examples |
| Mark contact information | <address>
<a href="mailto:docs@example.com">
Documentation team
</a>
</address> | View examples |
| Create an unordered list | <ul><li>HTML</li><li>CSS</li></ul> | View examples |
| Create an ordered list | <ol><li>Install</li><li>Build</li></ol> | View examples |
| Create a description list | <dl>
<dt>API</dt>
<dd>Application programming interface</dd>
</dl> | View examples |
Choose elements for the meaning of their content, then use CSS for presentation. Native semantics give browsers and assistive technologies a useful document structure without adding redundant roles.
Step by step
Detailed examples
Build a clear page landmark structure
Header, nav, main, and footer communicate the broad regions of a page. Use one visible main element for the current document, label multiple navigation regions distinctly, and avoid adding redundant landmark roles to elements that already provide them.
<header>
<a href="/">CmdMemo</a>
<nav aria-label="Primary">
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
</nav>
</header>
<main id="main-content">
<h1>Deployment guide</h1>
<p>Publish the generated static files.</p>
</main>
<footer>
<small>Copyright 2026 CmdMemo</small>
</footer>Note: A skip link can target the main element so keyboard users can bypass repeated navigation.
Choose article, section, and aside by meaning
Use article for independently reusable content, section for a thematic grouping that normally has a heading, and aside for tangential or supporting material. A generic div remains appropriate when no semantic element describes the content.
<article>
<h2>Version 2.1 release notes</h2>
<section aria-labelledby="changes-title">
<h3 id="changes-title">Changes</h3>
<p>The build now validates every internal link.</p>
</section>
<aside aria-labelledby="related-title">
<h3 id="related-title">Related documentation</h3>
<a href="/migration/">Migration guide</a>
</aside>
</article>Create a logical heading hierarchy
Headings label sections and should reflect nesting rather than desired font size. Begin with a clear page-level h1, use h2 for its major sections, and use h3 for subsections; style each level with CSS.
<main>
<h1>Deployment guide</h1>
<section>
<h2>Configuration</h2>
<p>Set the deployment environment.</p>
<section>
<h3>Environment variables</h3>
<p>Store secrets outside the repository.</p>
</section>
</section>
<section>
<h2>Publish</h2>
<p>Upload the generated public directory.</p>
</section>
</main>Note: Do not skip heading levels merely to obtain a smaller default font.
Add machine-readable and contextual meaning
Figure groups media with a caption, time exposes a standard date or time value, and address marks contact information for the nearest article or document. These elements add relationships that visual styling alone cannot express.
<article>
<h2>Traffic report</h2>
<p>Published <time datetime="2026-08-12">August 12, 2026</time>.</p>
<figure>
<img src="requests.svg" alt="">
<figcaption>Monthly requests increased from January through June.</figcaption>
</figure>
<address>
Questions: <a href="mailto:docs@example.com">Documentation team</a>
</address>
</article>Note: An empty image alt is appropriate here only because the caption communicates the figure's content. Provide meaningful alt text when the image adds information not present in the caption.
Represent collections with the correct list
Use unordered lists for collections without meaningful order, ordered lists for sequences, and description lists for name-value or term-description groups. List elements preserve relationships that separated paragraphs cannot communicate.
<h2>Technologies</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<h2>Build steps</h2>
<ol>
<li>Install dependencies</li>
<li>Generate the site</li>
</ol>
<h2>Terms</h2>
<dl>
<dt>API</dt>
<dd>Application programming interface</dd>
<dt>CLI</dt>
<dd>Command-line interface</dd>
</dl>Local code tester
Build a semantic document
Edit the landmarks, headings, sections, and lists, then inspect the rendered document locally.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.