HTML semantic elements reference

Using div for everything makes pages inaccessible and hurts SEO. Need to use the right semantic elements.

Semantic HTML element guide:

<!-- Page structure -->
<header>Site header, logo, nav</header>
<nav>Primary navigation links</nav>
<main>Main 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)</article>
<section>Thematic grouping with a heading</section>

<!-- Text semantics -->
<strong>Important text (not just bold)</strong>
<em>Emphasized text (not just italic)</em>
<mark>Highlighted/relevant text</mark>
<time datetime="2024-01-15">January 15, 2024</time>
<abbr title="HyperText Markup Language">HTML</abbr>
<code>Inline code</code>
<pre><code>Code block</code></pre>
<blockquote cite="url">Quoted text</blockquote>
<figure>
  <img src="chart.png" alt="Sales chart showing 20% growth">
  <figcaption>Q4 2024 sales performance</figcaption>
</figure>

<!-- Interactive -->
<details>
  <summary>Click to expand</summary>
  <p>Hidden content</p>
</details>
<dialog>Modal dialog</dialog>

<!-- Forms -->
<fieldset>
  <legend>Shipping Address</legend>
  <label for="city">City</label>
  <input id="city" type="text" required>
</fieldset>
<output>Calculated result</output>

<!-- Common mistake: div soup -->
<!-- BAD -->
<div class="header"><div class="nav">...</div></div>
<!-- GOOD -->
<header><nav>...</nav></header>

Rule: If there's a semantic element that describes the content, use it instead of div.

Semantic HTML improves accessibility (screen readers announce elements correctly), SEO (search engines understand page structure), and maintainability.

Building accessible, well-structured web pages