You can build a whole site with nothing but <div>. It will even look fine. But it's like writing a book with no chapter titles — technically readable, but nobody (and no search engine, and no screen reader) can tell what's what. Semantic HTML fixes that by giving each region a name that describes its purpose.
1div soup vs semantic structure
A <div> is a generic box with no meaning. "Div soup" is a page built entirely from them. Semantic elements replace the common ones with named regions:
| Instead of… | Use | For |
|---|---|---|
<div> | <header> | The top banner / intro of a page or section. |
<div> | <nav> | The main navigation links. |
<div> | <main> | The one main content area (one per page). |
<div> | <article> | A self-contained piece — a blog post, a card. |
<div> | <section> | A thematic grouping with its own heading. |
<div> | <aside> | Side content — related links, a sidebar. |
<div> | <footer> | The bottom — copyright, links. |
<div> and <span> are still useful — reach for them when no semantic element fits and you just need a box (<div>) or an inline wrapper (<span>), usually for styling.<div>is a box with no meaning; semantic elements name a region's purpose.- Common ones:
<header>,<nav>,<main>,<article>,<section>,<aside>,<footer>. - Use one
<main>per page; fall back to<div>/<span>only when nothing semantic fits.
2Why it's worth it — your Semantic Score
Imagine a meter that scores how meaningful your markup is. A layout built from only <div> tags scores low; swap in the right semantic elements and it climbs toward 100%. That score is a stand-in for three real-world wins:
- Accessibility — screen-reader users can jump straight to "main", "navigation" or "footer". Div soup gives them nothing to navigate by.
- SEO — search engines understand your page structure better, which helps them surface the right content.
- Maintainability — six months later,
<article>and<aside>tell you what each block is at a glance; forty nested<div>s do not.
- Semantic markup boosts accessibility (landmark navigation), SEO and long-term maintainability.
- A 'div-only' layout scores low; the right named elements push it toward 100%.
- Self-test: if the tag names alone describe the page, your markup is semantic.
★ Practical: convert div soup
In any playground, build a small page that uses real landmarks:
- A
<header>containing an<h1>and a<nav>. - A
<main>with one<article>inside. - An
<aside>with a couple of related links. - A
<footer>— and check you used no<div>where a semantic element fits.
Ready to test yourself?
Take the short quiz. Score 60% or more to mark this lesson complete.
Start the quiz →💡 Log in to save your progress and earn the certificate.