Semantic HTML
Semantic HTML uses HTML elements according to the meaning and structure of the content they contain.
Instead of describing only how something looks, semantic markup communicates what that element is.
What It Means in Practice
A heading is marked as a heading.
A button is a <button>.
Navigation is contained in <nav>.
The main content is identified with <main>.
A form field has an associated <label>.
These choices give browsers and assistive technologies useful information without requiring additional code.
How It Works
Browsers translate HTML structure into accessibility information that assistive technologies such as screen readers can use.
Many native elements also include expected keyboard navigation, roles, states, and behaviours automatically.
ARIA can supplement this information when necessary, but it generally works best when native HTML cannot express the required interaction on its own.
Why It Matters
Visual styling can make almost any element look like a button, heading, or navigation menu.
Assistive technologies need programmatic structure, not appearance.
Semantic HTML provides that structure and usually creates a stronger accessibility foundation with less custom work.
Common Problems
Common problems include:
- Clickable
<div>elements used instead of buttons - Heading levels chosen for appearance rather than hierarchy
- Inputs without labels
- Lists built from generic containers
- Page regions without useful landmarks
- Adding unnecessary ARIA to elements that already have native semantics
How to Improve
Choose HTML elements based on purpose before styling them.
Use CSS to change how semantic elements look rather than choosing meaningless markup because it is easier to style.