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 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.
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.
