HTML Semantic Elements
Semantic elements clearly describe their meaning to both the browser and the developer, unlike generic <div> or <span> tags. Examples include <article>, <section>, <nav>, <aside>, <figure>, and <time>.
Using semantic HTML improves accessibility for screen reader users, helps search engines understand content better, and makes code easier to read and maintain for other developers.
<article>...</article><section>...</section>Common semantic tags
<article> is self-contained content (like a blog post), <section> groups thematically related content, <nav> holds navigation links, and <figure>/<figcaption> pair images with captions.
Benefits of semantics
Screen readers can navigate by landmarks (nav, main, header). Search engines weigh semantic structure when ranking and summarizing pages.
<article>
<h2>Blog Post Title</h2>
<p>Post content...</p>
</article>Blog Post Title
Post content...article marks this as a self-contained, independently distributable piece of content.
<figure>
<img src="chart.png" alt="Sales chart">
<figcaption>Fig 1: Quarterly sales</figcaption>
</figure>(chart image)
Fig 1: Quarterly salesfigure and figcaption pair visual content with a caption semantically.
Key points
- Semantic tags describe meaning, not just appearance.
- <article>, <section>, <nav>, and <aside> are key structural tags.
- <figure>/<figcaption> pair media with captions.
- Semantics improve accessibility and SEO.