div Is the Last Resort, Not the First
A div says nothing about its contents, and a page built from thirty of them is invisible to a screen reader, a search engine, and reader mode alike. Swap them for the elements that mean something and lose nothing at all.
Read first: The Skeleton Every Page Has
A div says nothing about its contents, and a page built from thirty of them is invisible to a screen reader, a search engine, and reader mode alike. Swap them for the elements that mean something and lose nothing at all.
A div is a box with no meaning
<div> is a generic block container and <span> is a generic inline one. Neither says anything at all about what is inside. That is their entire specification.
They are not bad elements. They are empty ones, and the mistake is using them where a meaningful element exists.
<header> … <nav> … <main> … <footer>. Identical rendering, identical CSS effort — the class names were already describing exactly these things, so the markup was carrying the information and hiding it in a place only your stylesheet could read.
The names were right; they were in the wrong attribute.
The tell is a class name that names a region — class="header", class="nav", class="article". If you are writing the name of an HTML element into a class attribute, use the element.
header, nav, main, and footer name the regions
Four elements cover the skeleton of almost every page, and they create landmarks — regions a screen reader user can jump between directly.
<body> <header> <a href="/">My site</a> <nav> <ul> <li><a href="/work/">Work</a></li> <li><a href="/about/">About</a></li> </ul> </nav> </header> <main> <h1>Page title</h1> <p>The actual content of this page.</p> </main> <footer> <p>© 2026</p> </footer></body>Introductory content for its nearest section. A page can have several — one for the page, one inside each article. It is not "the top of the page".
A major block of navigation links. Not every group of links: the three in your footer do not need it. One or two per page.
The content unique to THIS page — not the header, nav, or footer. Exactly one per page, and it must not be nested inside the others.
Closing content for its nearest section. Like header, it can appear inside an article as well as at the end of the page.
Tangentially related content: a sidebar, a pull quote, related links. Removing it should not damage the main content.
article and section are not interchangeable
These two get confused constantly, and there is a clean test.
article — stands alone
Would this still make sense republished somewhere else, on its own? A blog post, a news story, a product card, a comment, a forum reply. The test is syndication: if it could go in an RSS feed by itself, it is an article.
section — a thematic part
A chunk of something larger that would not stand alone. Chapters of a document, the tabs of a panel, grouped parts of a long page. A section should essentially always have a heading — if it does not, it is probably a div.
<main> <h1>Blog</h1> <article> <h2>Building a desk</h2> <p>…</p> <section> <h3>Materials</h3> <p>…</p> </section> <footer>Published <time datetime="2026-08-09">9 August</time></footer> </article> <article> <h2>Learning to weld</h2> <p>…</p> </article></main>Semantic markup is free accessibility
This is the argument that matters, and it is not really about disability — it is that four completely different consumers read your markup, and only one of them has eyes.
Announce landmarks, list headings, and let a user jump straight to main. A page of divs offers none of that: it is one undifferentiated run of text.
Use structure to work out what a page is about and what to show. main and article carry weight that a div cannot.
Every browser has one, and it works by guessing which element holds the article. Semantic markup makes it a fact rather than a guess.
Reading </main> is instantly clearer than the fourth </div> in a row. This one is not a small benefit.
The cost of all of it is typing a different word. There is no performance difference, no extra CSS, and no browser support question — these have been supported everywhere for over a decade.
Two more elements replace a common pile of JavaScript with nothing at all:
<details> <summary>What is included?</summary> <p>Everything. This opens and closes with no JavaScript, it is keyboard accessible, and it is findable by the browser's own in-page search.</p></details>When a div is the right answer
Divs are not deprecated and this chapter is not asking you to eliminate them. Use one when you need a box for layout and there is no meaning to express.
<!-- A wrapper that exists purely to be a flex container --><div class="card-grid"> <article class="card">…</article> <article class="card">…</article></div> <!-- A scroll container around a wide table --><div class="table-scroll"> <table>…</table></div>Both of those are honest. The div is a styling hook and it makes no claim about the content, which is exactly what a div is for.
One last note, because it is the most consequential version of this mistake: a div with a click handler is not a button. It cannot be focused with the keyboard, does not respond to Enter or Space, and is not announced as anything actionable. Use a real <button> and style it however you like.
Key takeaways
- div and span are generic containers that say nothing. That is their whole specification.
- A class name that names a region — class="header" — is a sign the element exists already.
- header, nav, main, and footer create landmarks a screen reader user can jump between.
- There is exactly one main per page, and it holds what is unique to that page.
- main is what powers "skip to main content", reader mode, and part of how search engines read a page.
- article stands alone and could be syndicated; section is a thematic part of something bigger and should have a heading.
- section used purely for styling is div soup with extra letters.
- Four different consumers read your markup and only one of them has eyes.
- <details> and <summary> give you an accessible accordion with no JavaScript.
- A div is right when you need a box for layout with no meaning to express — but a div with a click handler is never a button.
Before you move on
Quick check
Answer these to unlock the next chapter: 3 of 4 to pass. You can retake it anytime.
Make a free account to read on
Every chapter is free — an account lets your course progress follow you from your laptop to your phone. No payment, no trial.