Semantic HTML

Semantic HTML is the practice of using HTML elements according to their intended
meaning rather than their visual appearance. The most powerful accessibility tool
is already built into HTML — using the right element for the right job gives screen
readers, search engines, and browsers the context they need, with no ARIA required.
^[1]

Why it matters

When a sighted user sees a large bold line of text at the top of a page, they
understand it is a heading. A screen reader user navigating by headings needs
the same signal — and that signal comes from the element, not the style. A div
styled to look like a heading communicates nothing. An h1 communicates everything.
^[2]

The same principle applies across the entire element set. A button element is
keyboard focusable, activatable with Enter and Space, and announced as a button
by screen readers — for free. A div with an onclick handler is none of those
things without significant additional work.

Document structure

Use landmark elements to define the structure of the page:

Headings

Headings must form a logical outline. Start with a single h1 per page, then
use h2 through h6 to represent hierarchy — never skip levels for visual effect.
^[2]

❌ Incorrect: h1 → h3 (skipped h2)

✅ Correct: h1 → h2 → h3

Interactive elements

Always prefer native interactive elements over custom ones:

• Use button for actions
• Use a href for navigation
• Use input, select, textarea for form controls
• Use details and summary for disclosure widgets

Native elements come with keyboard support, ARIA semantics, and browser
accessibility APIs built in. Custom elements built from divs and spans require
you to rebuild all of this manually — and most implementations get something wrong.
^[3]

Lists

Use ul for unordered lists, ol for ordered lists, and dl for
definition lists. Screen readers announce the list type and item count, helping
users understand the structure before they navigate into it.
^[1]

References

1. W3C Web Accessibility Initiative. Understanding Success Criterion 1.3.1: Info and Relationships. https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html ↑
2. MDN Web Docs. HTML elements reference. https://developer.mozilla.org/en-US/docs/Web/HTML/Element ↑
3. W3C. Using semantic elements — Techniques for WCAG 2.2. https://www.w3.org/WAI/WCAG22/Techniques/html/H97 ↑