Semantic HTML5: semantic vs div soup
Replace meaningless wrapper divs with semantic elements and understand the document outline algorithm and heading hierarchy.
Semantic HTML5: semantic vs div soup is a free Frontend Academy lesson on CoddyKit. This is lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, and your progress syncs across the web and the CoddyKit app. The Frontend Academy course includes 4 lessons in total.
Div Soup — The Problem
Div soup is a page built entirely from <div> and <span> elements. It requires class names to communicate structure, can't be understood by screen readers without those classes, and sends no meaning to search engines.
<!-- Div soup (avoid) -->
<div class="container">
<div class="header">
<div class="logo">...</div>
<div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>
</div>The Semantic Alternative
Replace meaningless divs with semantic elements that communicate purpose. The structure is now self-documenting and understandable without any CSS.
<!-- Semantic HTML (preferred) -->
<body>
<header>
<a href="/"><img src="logo.svg" alt="Brand"></a>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
</body>The Document Outline Algorithm
Heading elements (h1-h6) create a document outline. Screen reader users navigate by heading. Assistive technology announces the outline level. Keep the hierarchy logical: h1 for the page title, h2 for major sections, h3 for subsections.
<time> — Machine-Readable Dates
The <time> element marks up dates and times with a machine-readable datetime attribute. Search engines understand event dates; screen readers can announce formatted dates.
<p>Published on <time datetime="2025-06-15">June 15, 2025</time></p>
<time datetime="2025-06-15T14:30">2:30 PM</time><address>
The <address> element wraps contact information for the nearest article or the document. It doesn't have to be a postal address — email, phone, and social handles count.
<address>
<a href="mailto:hello@coddy.app">hello@coddy.app</a><br>
<a href="https://twitter.com/coddykit">@coddykit</a>
</address><figure> and <figcaption>
<figure> wraps self-contained content like images, charts, code examples, or videos. <figcaption> provides a caption that's semantically linked to the figure.
<figure>
<img src="chart.png" alt="Monthly active users 2025">
<figcaption>Figure 1: Monthly active users increased 42% in Q4 2025.</figcaption>
</figure><blockquote> and <cite>
<blockquote> marks an extended quotation. Use the cite attribute for the source URL. The <cite> element marks the title of a creative work (book, article, film).
<blockquote cite="https://developer.mozilla.org">
<p>HTML is the standard markup language for creating web pages.</p>
<footer>—<cite>MDN Web Docs</cite></footer>
</blockquote><details> and <summary>
The <details> + <summary> pair creates a native accordion/disclosure widget with no JavaScript. The browser handles open/close, keyboard interaction, and accessibility automatically.
<details>
<summary>What is the refund policy?</summary>
<p>We offer a 30-day money-back guarantee on all plans.</p>
</details><mark> — Highlighted Text
<mark> represents text that is highlighted for reference — like a search result match. It's semantically different from styling text yellow with CSS.
<p>Search results for <q>flexbox</q>:</p>
<p>Use <mark>flexbox</mark> for one-dimensional layouts...</p><abbr> — Abbreviations
Wrap abbreviations and acronyms with <abbr> and provide the full term in the title attribute. Screen readers and browsers expose the expansion to users on hover.
<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="Accessible Rich Internet Applications">ARIA</abbr>When to Use <div> and <span>
Both are still useful. <div> is the right choice for a generic block wrapper that has no semantic meaning — layout containers, component roots in React. <span> for inline styling hooks with no semantic meaning.
Quick Check
Which HTML element creates a native collapsible disclosure widget with no JavaScript required?
Recap: Semantic HTML5
Replace div soup with semantic elements: header, nav, main, article, section, aside, footer. Use time for dates, figure/figcaption for media, details/summary for accordions, mark for highlights. Reserve div and span for layout containers with no semantic meaning.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 41
- Lessons
- 163
Frequently Asked Questions
Is the “Semantic HTML5: semantic vs div soup” lesson free?
Yes — the full text of “Semantic HTML5: semantic vs div soup” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO. The Frontend Academy course includes 4 lessons in total.
What will I learn in “Semantic HTML5: semantic vs div soup”?
Replace meaningless wrapper divs with semantic elements and understand the document outline algorithm and heading hierarchy. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
How long does the “Semantic HTML5: semantic vs div soup” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Form Controls: input types select textarea
- ARIA and Accessibility: label role aria-*
- Semantic HTML5: semantic vs div soup
- Form Validation Attributes