Semantic HTML vs. Div Soup

Imagine you move to a new city. You need to find the hospital, the library, the post office, and a restaurant. But when you arrive, every single building has the same sign on the front: "BUILDING." No names. No numbers. No clues. You would have to walk into every door and look around before figuring out what is inside. That would be exhausting, confusing, and slow.

That is exactly what happens when a webpage is built using only <div> tags. A <div> is a generic container with no meaning — it is just "a thing." When a screen reader encounters a page full of nested divs, it has no idea what is a navigation bar, what is the main content, and what is a footer. Search engines like Google face the same problem: they see a blob of content with no structure. And the developer who has to maintain the code six months later? They see a wall of <div><div><div>... and have to read every line to understand the page layout.

There is a better way. HTML provides tags that are just as easy to use as <div> but carry meaning: <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>. These are called semantic elements — "semantic" means "relating to meaning." They work exactly like <div> (they are all block-level containers), but they tell the browser, screen readers, search engines, and other developers what role each section plays.