What is Semantic HTML?
Semantic means elements communicate their purpose, not just their appearance. Compare:
<!-- Non-semantic: what does this content mean? -->
<div class="big-bold">Blog Post Title</div>
<div class="box">
<div>Published 1 Jan 2025</div>
<div>Article body text...</div>
</div>
<!-- Semantic: meaning is clear -->
<article>
<h1>Blog Post Title</h1>
<time datetime="2025-01-01">Published 1 Jan 2025</time>
<p>Article body text...</p>
</article>Useful Semantic Elements
| Element | Purpose |
|---|---|
<figure> | Image or diagram with optional caption |
<figcaption> | Caption for a <figure> |
<time> | Date or time with machine-readable datetime |
<address> | Contact information for the author/page |
<details> | Expandable/collapsible disclosure widget |
<summary> | Visible label for a <details> |
<mark> | Highlighted or search-result text |
<abbr> | Abbreviation with full expansion |
<figure>
<img src="chart.png" alt="Sales chart">
<figcaption>Q1 2025 sales data</figcaption>
</figure>
<details>
<summary>What is HTML?</summary>
<p>HTML is the language used to build web pages.</p>
</details>
<p>Published on <time datetime="2025-06-01">June 1, 2025</time>.</p>
<abbr title="HyperText Markup Language">HTML</abbr>Semantic HTML is free accessibility. Screen readers, search engines, and browser reading modes all understand semantic elements — use them instead of
<div> wherever possible.