Watch
Semantic HTML 0:52
A 52-second explainer of Semantic HTML, narrated over the same demo you can try yourself.
Try the interactive Semantic HTML demo
What this video covers
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.
The two pages looked identical - but switch on the screen-reader view and the div-soup version was a single featureless blob, while the semantic one offered landmarks to jump to and a heading outline to skim. Same pixels; only the semantic markup gave assistive tech anything to work with. The meaning was never on screen - it was in the tags.
