The Role of Semantic HTML

Learn why semantic elements like <nav>, <main>, and <header> are essential for screen readers and accessible navigation.

Step 1 of 5

The problem with div soup

Open any modern website in DevTools and you will often find hundreds of

elements nested inside each other. Developers sometimes call this "div soup" — a page where every piece of structure is built from generic

and tags with no semantic meaning. To a sighted user looking at the page, everything might look fine because CSS has styled the divs to look like headers, navigation bars, sidebars, and footers. But to a screen reader, every single one of those elements is just a nameless, meaningless container.

Imagine walking into a large building where none of the rooms have signs. No "Exit" signs, no "Restroom" labels, no room numbers, no directory in the lobby. You could eventually figure out where things are by wandering around and looking, but it would take far longer and be far more frustrating. Now imagine navigating that building blindfolded. Without those signs, it would be nearly impossible. That is what a screen reader user experiences on a page built entirely from divs — there are no landmarks, no signposts, and no structure to navigate by.

Semantic HTML elements solve this problem. Elements like

Think of it this way: Think of a building. Semantic HTML elements are like the signs on rooms — "Exit," "Lobby," "Restroom," "Conference Room A." Divs are like blank, unmarked doors. A sighted person can look through a glass door and figure out what is inside. A blindfolded person relies entirely on the signs. Screen readers are like that blindfolded person — they need the signs (semantic elements) to help users navigate efficiently.

Web Standard

HTML5 introduced landmark elements specifically to improve accessibility. Screen readers use these landmarks to build a navigation menu that lets users jump between sections — similar to a table of contents. Without landmarks, users must tab through every single element on the page to find what they need.

Tip

A common mistake is wrapping everything in divs and then adding ARIA roles to fake the semantics:

Learn more on MDN

HTMLMDN: Semantics HTMLMDN: Document and website structure

HTMLREAD ONLY

PREVIEW