Semantic HTML Elements
Replace generic div soup with elements that describe the actual role of each part of a page.
2 min de lectura
It's entirely possible to build a page out of nothing but <div> and <span> tags with CSS classes doing all the describing — browsers will render it fine. But that throws away information that HTML could be carrying for free.
Div soup vs. semantic markup
<!-- Works, but says nothing about what each part IS -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div><!-- Same visual result, but the structure is machine-readable -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>Both versions can look identical once CSS is applied — the difference is invisible to sighted users but significant to screen readers, search engines, and browser extensions (like reader mode), all of which rely on tag names, not class names, to understand a page's structure.
The common layout elements
<body>
<header>
<h1>Site Name</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
<aside>
<h3>Related Links</h3>
</aside>
</main>
<footer>
<p>© 2026 My Site</p>
</footer>
</body><header>— introductory content for a page or a section (not necessarily "the top of the page" — an<article>can have its own<header>too).<nav>— a block of navigation links.<main>— the primary content of the page; there should be exactly one per page.<article>— a self-contained piece of content that would make sense distributed on its own (a blog post, a news story, a forum post).<aside>— content tangentially related to the main content (a sidebar, a pull quote).<footer>— closing content for a page or section (copyright, links, contact info).<section>— a generic thematic grouping, used when none of the more specific elements fit but the content still deserves its own landmark (usually paired with a heading).
When to still use <div> and <span>
<div> and <span> aren't wrong — they're the right choice precisely when an element exists purely for styling or scripting purposes and carries no semantic meaning of its own, like a wrapper needed only to apply a CSS grid layout.
Why this pays off
Semantic elements are landmarks: a screen reader user can jump straight to <nav> or <main>, skipping repeated boilerplate, the same way a sighted user's eyes skip straight to the content they want. Writing <div class="main"> instead of <main> throws that shortcut away for no benefit.