div & span

<div> and <span> are generic containers with no meaning of their own. A <div> groups block-level content; a <span> wraps a piece of inline text. They exist so you can attach styles or scripts when no meaningful element fits.

div: a generic block

Each <div> groups a heading and two paragraphs into a "card" that CSS can style as a unit. On its own, a div looks like nothing at all.

span: a generic inline wrapper

A <span> lets you target a few words for styling or scripting without breaking the line.

Reach for a meaningful element first

Because div and span carry no meaning, screen readers and search engines get nothing from them. Before using one, check whether a semantic element fits:

Div and span are perfect for purely presentational wrappers: layout containers, styling hooks, and groupings that don't correspond to any meaningful unit.

Divs for layout

Divs are the usual tool for wrapping content so CSS can lay it out:

The outer div is the layout container; the inner ones are its columns. None of them change the meaning of the content inside.

The "div soup" problem

Pages built entirely from nested divs are hard to read, hard to style and inaccessible. Compare:

<div class="top">
  <div class="menu">
    <div class="item"><a href="/">Home</a></div>
  </div>
</div>
<div class="content">
  <div class="title">Welcome</div>
</div>

<header>
  <nav>
    <ul><li><a href="/">Home</a></li></ul>
  </nav>
</header>
<main>
  <h1>Welcome</h1>
</main>

The second version is shorter, and a screen-reader user can jump straight to the navigation or main content. Lesson 24 covers these semantic layout elements.

Divs that act like buttons — don't

A clickable <div> can't be reached with the Tab key, doesn't respond to Enter or Space, and isn't announced as a button. Making it accessible needs role, tabindex and keyboard handlers — all of which a real <button> provides for free.

Try it yourself