Why Semantic HTML Matters
<div>s, and the concrete SEO, accessibility, and maintainability payoff.
What Is "Divitis"?
Divitis is the habit of wrapping everything in generic <div> elements instead of using tags that describe what the content actually is. It works visually, but it throws away information that browsers, search engines, and assistive technology could otherwise use.
<!-- Divitis: works, but means nothing --> <div class="header">...</div> <div class="nav">...</div> <div class="article">...</div> <!-- Semantic: same visual result, real meaning --> <header>...</header> <nav>...</nav> <article>...</article>
The SEO Benefit
Search engines parse your HTML to understand a page's structure. A <nav>, <article>, and <h1> tell a crawler exactly what's navigation, what's main content, and what's most important — a page built entirely of <div>s gives none of that for free.
The Screen Reader Experience
Screen reader users often navigate by jumping between landmarks — "go to navigation," "go to main content." Semantic elements create these landmarks automatically. A div-only page forces screen reader users to listen through everything linearly, with no shortcuts.
| Approach | What a screen reader announces |
|---|---|
| <div class="nav"> | Nothing special — just a generic group |
| <nav> | "Navigation" landmark — jumpable directly |
Maintainability
Six months later, <div class="wrapper-2"> tells you nothing. <article> and <aside> tell any future developer — including future you — exactly what each block is for, without opening a CSS file to check.
Take this div-only markup and rewrite it using semantic tags:
<div class="header">, <div class="nav">, <div class="article">, <div class="footer">.
💡 Show hints if you're stuck
- header → header, nav → nav, article → article, footer → footer