accessibility
Semantic HTML
What is semantic HTML and why does it matter for accessibility?
Semantic HTML means using elements for their intended purpose - header, nav, main, button, h1-h6, ul/ol/li - rather than wrapping everything in styled divs and spans. The meaning isn't visible on screen but is crucial for assistive tech: it lets screen readers announce roles, list headings, and jump straight to the main content.
Also known as: semantic html, semantic markup, landmarks, html semantics
Prefer to watch?
Watch the recap 0:52
The demo
Two pages that look the same. Flip between "div soup" and "semantic" and watch the screen-reader outline - the structure a blind user actually navigates by - appear or vanish.
What this demo shows (text version)
The same page is shown two ways. The visual rendering is identical in both. But the "screen-reader outline" - the landmarks and headings assistive technology extracts to navigate by - differs completely. In "div soup", everything is nameless divs, so the outline is empty: no landmarks to jump to, no headings to skim, just one undifferentiated blob. In "semantic", the same content uses header, nav, main and footer landmarks and real headings, so the outline lists a banner, navigation, main with an H1 and H2s, and a footer.
The meaning is invisible on screen and essential to assistive tech. Semantic elements bring roles, keyboard behaviour and structure for free; div soup forces users to wade through everything linearly with nothing to jump between. Use the right element first and reserve ARIA for what native HTML can't express. (This entry is itself built with semantic HTML.)
Use the element that matches the thing: a