Semantic HTML Elements Quick Reference

Developers use div and span for everything instead of semantic HTML elements, hurting accessibility, SEO, and code readability.

Semantic HTML elements and when to use them:

<!-- Page structure -->
<header>Site header, logo, nav</header>
<nav>Navigation links</nav>
<main>Primary content (one per page)</main>
<aside>Sidebar, related content</aside>
<footer>Site footer, copyright</footer>

<!-- Content sections -->
<article>Self-contained content (blog post, product card, comment)</article>
<section>Thematic grouping with a heading</section>
<figure>
  <img src='chart.png' alt='Sales chart'>
  <figcaption>Q3 2024 sales breakdown</figcaption>
</figure>

<!-- Text semantics -->
<time datetime='2024-03-15'>March 15, 2024</time>
<address>Contact information for the author</address>
<mark>Highlighted/relevant text</mark>
<abbr title='HyperText Markup Language'>HTML</abbr>
<cite>Title of a referenced work</cite>
<code>Inline code</code>
<kbd>Keyboard input</kbd>
<samp>Sample output</samp>

<!-- Interactive -->
<details>
  <summary>Click to expand</summary>
  <p>Hidden content revealed on click</p>
</details>
<dialog>Modal or non-modal dialog</dialog>
<menu>List of interactive items (toolbar buttons)</menu>

<!-- Data -->
<output>Result of a calculation</output>
<meter value='75' min='0' max='100'>75%</meter>
<progress value='60' max='100'>60%</progress>

<!-- Common mistakes -->
<!-- BAD --> <div class='button' onclick='...'>Click</div>
<!-- GOOD --> <button type='button'>Click</button>

<!-- BAD --> <div class='nav'><a>Link</a></div>
<!-- GOOD --> <nav><a>Link</a></nav>

<!-- BAD --> <b>Important</b>
<!-- GOOD --> <strong>Important</strong> (semantic meaning)

Semantic HTML gives meaning to content. Screen readers use it for navigation, search engines use it for understanding, and developers use it for maintainability. div tells nothing about the content.

Writing meaningful, accessible HTML