accessibility
Semantic HTML
What is semantic HTML and why does it matter for accessibility?
Semantic HTML means using elements for what they mean - header, nav, main, button, h1-h6, list - rather than wrapping everything in styled divs and spans. The meaning is invisible on screen but everything to assistive technology: it's what lets a screen reader 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 means the thing: a