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 — 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, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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.
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, and the Frontend Academy course includes 4 lessons in total. 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.
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; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
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