HTML Semantics
Semantic elements describe what their content means, not just how it looks.
Using semantic elements makes pages easier for browsers, search engines, and screen readers to understand. Compare <nav> for a menu with a plain <div>: only the first one says what the block is for.
Common Semantic Elements
A Semantic Article
article with a heading
<!DOCTYPE html>
<html>
<body>
<article>
<h2>Remote Work Tips for New Hires</h2>
<p>Set a fixed start time and take real breaks away from your desk.</p>
</article>
</body>
</html>A Figure With a Caption
figure and figcaption
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="chart.png" alt="Sales chart">
<figcaption>Sales grew in Q2.</figcaption>
</figure>
</body>
</html>Note: Reach for a semantic element first, and only fall back to <div> when nothing more specific fits.
Exercise: HTML Semantics
What is the main benefit of using a semantic element like <article> instead of a plain <div>?
