HTML Semantics
Semantic HTML explains the role of content. It gives browsers and accessibility tools a more useful starting point than a collection of undifferentiated containers.
How it works
- Use article for a self-contained composition and section for a thematic grouping, usually with a heading. They are not interchangeable layout wrappers.
- Use figure with figcaption when content has a caption and can be treated as a unit. Use time datetime for machine-readable dates and times.
- Prefer native HTML semantics before adding ARIA. A native button already provides behaviour that role="button" on a div does not supply.
A practical example
<article>
<header><h2>Tool-care session</h2></header>
<p>Starts on <time datetime="2026-11-07T10:00">7 November at 10:00</time>.</p>
<p>Bring one tool you would like to maintain.</p>
</article>
The article could stand alone in a list of events. Its time element gives software a parseable local date and time in addition to the visible wording.