Module 4: Structure and Semantics · Lesson 4 of 5
What Is Div Soup? Fix It with Semantic HTML Tags
All lessons in Module 4
Goal: Swap pretend-meaning divs for the semantic tags they imitate.
Learn
Div soup is a page made of nothing but <div>s, where class names like class="header" try to carry the meaning. The name comes from tag soup (opens in a new tab), an older term for messy HTML. Such a page may look fine. Browsers, though, treat class names as styling hooks, so a screen reader sees one long, flat box with no landmarks to jump between.
Fixing it is usually quick. When a class name says what the box is, a real tag for it probably exists.
| Div soup | Semantic |
|---|---|
<div class="header"> | <header> |
<div class="nav"> | <nav> |
<div class="main"> | <main> |
<div class="article"> | <article> |
<div class="footer"> | <footer> |
Save <div> for boxes whose only job is styling, as covered in div and span.
The short version
- Class names carry no meaning for browsers or screen readers, so to them
<div class="header">is an anonymous box. - A class name that says what a box is usually points to a semantic tag you can use instead.
- Rename the opening tag and its matching closing tag in the same step.
- Boxes that exist only for styling or layout can stay as
<div>.
Example
<!-- Before: a div pretending -->
<div class="footer">
<p>Made by Ana</p>
</div>
<!-- After: the real thing -->
<footer>
<p>Made by Ana</p>
</footer>Your task
The Pixel Pets Shelter page is div soup from top to bottom. Replace every <div> with the semantic tag named in its class: header, nav, main, article and footer.
- For each div, change the opening tag and its matching closing tag.
- Delete the
classattributes. The tag names carry that information now.
At the end, the page should contain zero <div> tags.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<nav>
<a href="#adopt">Adopt</a>
<a href="#care">Care tips</a>
</div>Right
<nav>
<a href="#adopt">Adopt</a>
<a href="#care">Care tips</a>
</nav>A stray </div> cannot close a nav, so the nav stays open and swallows whatever comes after it.
Wrong
<section class="header">
<h1>Pixel Pets Shelter</h1>
</section>
<section class="footer">
<p>© 2026 Pixel Pets Shelter</p>
</section>Right
<header>
<h1>Pixel Pets Shelter</h1>
</header>
<footer>
<p>© 2026 Pixel Pets Shelter</p>
</footer>Turning every div into a section only cooks a new soup, so pick the tag that matches what each box does.
Go deeper
Div soup used to be the only option. Before HTML5 (first drafted in 2008) there were no <header>, <nav>, <main>, <article> or <footer> tags, so developers wrote ids like id="header". Several of the new tags were named after the class and id names that turned up most often on real websites.
Some older code patches the gap with ARIA roles, such as <div role="navigation">. Screen readers understand that. Still, the first rule of ARIA (opens in a new tab) says to use the native element when one exists: it has the right role built in and the code is shorter.
On a real page, start with the big regions and then move to the content inside <main>. Don't overdo it. A div that wraps two columns purely for CSS is a styling box, and styling boxes are what div is for. The semantic HTML guide has more before-and-after examples.
Most code editors highlight the matching tag when you click an opening tag. Use that to find the closing tag you need to rename.
Frequently asked questions
What is div soup in HTML?
Markup built almost entirely from <div> elements, with class names like header or menu standing in for meaning. Once styled it can look perfect, yet the browser sees nothing but anonymous boxes. Screen reader users get no landmarks or structure to move through, and other developers have a harder time reading the code. Semantic tags fix both problems. For a tongue-in-cheek tour of div soup and other bad habits, visit BadHTML (opens in a new tab).
Is using a lot of divs bad for SEO?
Not directly. Search engines do not penalize divs, and layout divs are perfectly normal. What you lose is information: in div soup, nothing tells a crawler or an assistive tool which part is the menu, which is the main content and which is the footer. Semantic tags and real headings spell that out. Accessibility definitely improves, and machines may understand your page better too.
How can I check if my HTML is semantic?
Run three quick checks. Read your code with the class names mentally removed and see whether it still says what each part is. Then open your browser's developer tools and look for landmarks and headings in the accessibility tree. Finally, put the page through the W3C validator, the Nu Html Checker (opens in a new tab). It also catches mismatched closing tags.
Tags in this lesson
Read next
How long does it take to learn HTML? About six weeks, and here is the plan
How long does it take to learn HTML? One hour to a first page, two weeks for the basics, six weeks to be comfortable. A week-by-week plan with free lessons and projects.
Semantic HTML explained with before-and-after examples
Semantic HTML with real examples: the landmark elements, article vs section, rewriting a page of div soup, and what meaningful tags do for accessibility and SEO. Checklist included.
20 HTML best practices for clean, valid code
Twenty rules we apply to every HTML file: doctype, lang, charset, semantic tags, alt text, labels, file names and W3C validation, each with a short code example.