Why Semantic Markup Matters
"Semantic HTML" means choosing tags based on what content means, not just how it should look. Compare these two approaches to the same page:
<!-- Non-semantic -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main-content">...</div>
<div class="footer">...</div>
<!-- Semantic -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>
Both can look identical once CSS is applied — a <div class="header"> and a <header> can be styled exactly the same way. But the semantic version communicates meaning to:
- Screen readers, which let visually impaired users jump directly to "navigation" or "main content" by name.
- Search engines, which use semantic structure to better understand and rank page content.
- Other developers, who can read the markup and immediately understand the page's structure without digging through class names.
- Browsers themselves, which apply some default behaviors differently to certain semantic tags.
<div> and <span> aren't wrong to use — they're perfectly fine for purely generic, meaningless grouping (like a wrapper needed only for CSS styling). The goal isn't to eliminate <div> entirely, but to reach for a semantic tag first whenever one accurately describes the content's role.