The Role of Semantic HTML

Open any modern website in DevTools and you will often find hundreds of <div> elements nested inside each other. Developers sometimes call this "div soup" — a page where every piece of structure is built from generic <div> and <span> 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 <nav>, <main>, <header>, <footer>, <section>, and <article> carry meaning that browsers and assistive technologies can understand. They create a structural map of the page that screen reader users can use to jump directly to the content they need — just like a sighted user can glance at a page and immediately spot the navigation bar or main content area.

When a screen reader encounters a <nav> element, it announces "navigation" and the user knows they have found a menu. When it encounters <main>, it knows this is the primary content and can offer a shortcut to jump there. With divs, the screen reader has no idea what anything is — it just reads through every element in order, which can mean listening to dozens of menu items before reaching the actual page content.