Imagine reading a book where every single paragraph looked the same — no chapter headings, no sidebars, no footnotes. That is what the web was like before semantic HTML. We had <div> for everything, and nobody knew what anything meant.
What Semantic HTML Means
Semantic HTML means using tags that describe the meaning of the content, not just how it looks. A <nav> tag says "this is navigation," not just "this is a box." A <footer> says "this is the footer of the page." The browser, search engines, and assistive technologies all understand that meaning.
<!-- Non-semantic — what is this? -->
<div class="header">Site Title</div>
<div class="nav">Links go here</div>
<div class="main">Content</div>
<div class="footer">Copyright</div>
<!-- Semantic — the meaning is clear -->
<header>Site Title</header>
<nav>Links go here</nav>
<main>Content</main>
<footer>Copyright</footer>
Why Div Soup Is Bad
"Div soup" is what happens when a page uses nothing but <div> tags with CSS classes to create structure. A screen reader trying to navigate that page has almost no information about which section is which. Search engines also struggle — if your navigation is just a div with a class, Google has to guess what it is. Semantic tags remove that guesswork.
How Semantic Tags Help SEO and Accessibility
Search engines rank content higher when it is properly structured. A <main> tag tells Google exactly where the primary content lives. Users with screen readers can jump between <nav>, <main>, and <aside> using keyboard shortcuts. It is one of the simplest things you can do to make your site both more accessible and more findable.