<div> vs Semantic Elements

<div> is the most used element on the web and also the most misused. Understanding when to reach for it — and when not to — is a key skill.

What `<div>` is

<div> is a generic block container. It groups content for layout or styling purposes. It has no semantic meaning whatsoever.

<div>
  <p>Some content.</p>
</div>

The <div> here tells the browser nothing about what the content represents. It is a neutral box.

The problem with overusing `<div>`

When every container in a page is a <div>, the HTML stops communicating anything. This is sometimes called “div soup”:

<div id="page">
  <div id="header">
    <div id="logo">My Site</div>
    <div id="nav">
      <div class="nav-item"><a href="/">Home</a></div>
      <div class="nav-item"><a href="/about">About</a></div>
    </div>
  </div>
  <div id="main">
    <div class="post">
      <div class="post-title"><h2>First Post</h2></div>
      <div class="post-content"><p>Hello.</p></div>
    </div>
  </div>
  <div id="footer">Copyright 2025</div>
</div>

The id attributes hint at intent, but the HTML structure itself carries no meaning. Every container is identical from the browser’s perspective.

The semantic alternative

Semantic elements replace the need for id-labeled divs:

<header>
  <p>My Site</p>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>
<main>
  <article>
    <h2>First Post</h2>
    <p>Hello.</p>
  </article>
</main>
<footer>Copyright 2025</footer>

No id needed. The elements themselves say what they are.

When `<div>` is still the right choice

<div> is valid and useful in two situations:

1. No semantic element fits. If you are grouping elements purely for CSS layout and no semantic meaning applies, <div> is correct.

<main>
  <div class="two-column-layout">
    <article>...</article>
    <aside>...</aside>
  </div>
</main>

The <div> here is just a layout wrapper inside meaningful containers.

2. Inside already-semantic containers. A <div> inside an <article> to group a button and label for styling purposes is fine — the structural meaning is already established by the outer element.

The decision rule

If a semantic element exists that accurately describes the content, use it. If nothing fits, use <div>.

Instead of	Use
`<div id="header">`	`<header>`
`<div id="nav">`	`<nav>`
`<div id="main">`	`<main>`
`<div class="section">`	`<section>`
`<div class="post">`	`<article>`
`<div id="footer">`	`<footer>`
A layout-only wrapper	`<div>` ✓

Exercise

Open index.html in VS Code.

Your <body> currently has all content sitting directly inside it. Look at your notes from Lesson 01 about which parts could be a header, main content, and footer.

Now answer this for each part: is there a semantic element that describes it, or is it just a layout group?

You do not need to make changes yet — you will do that in the next lesson. The goal here is to decide which semantic elements fit before you write them.

Recap

<div> is a generic, meaningless container — useful for layout grouping with no semantic intent.
Overusing <div> creates “div soup” — markup that tells the browser and assistive technologies nothing.
Semantic elements (<header>, <main>, <footer>, etc.) communicate purpose without requiring class or id attributes.
Use <div> when no semantic element fits. Otherwise, use the element that describes the content.