div and span

A longer page may need a container around several pieces of content for future styling, or a name for a small text fragment that is not a warning or code. Generic containers handle these cases without adding a specific content meaning.

Group content with div

div is a generic container, normally displayed as a block using the available width. An empty div may have no visible height. It does not automatically create a card background or border:

<div class="club-card">
  <h2>Morning reading group</h2>
  <p>Every Saturday at ten.</p>
</div>

class groups elements under a name you choose. club-card is not a built-in effect. Multiple elements can share that class so CSS can later select them together. Unlike id, class values can repeat. An element can also have multiple class names separated by spaces.

Name a text fragment with span

span is generic too, but normally participates inline in the surrounding text:

<p>This week's topic is <span class="topic">nature writing</span>. Join us!</p>

Without CSS, the span may look exactly like its surroundings. A class name does not automatically color it. Inline text can still wrap in a narrow viewport; inline does not mean it must fit on one line forever.

Prefer meaningful elements when available

Use p for a paragraph, strong for importance and ul or ol for a list. Do not replace them all with div and span merely to style them later. These containers do not supply heading, link or button behavior. Use button when you need a button.

The Lab compares the same words in div and span, then adds a class that has no styling yet. The next lesson introduces meaningful page-region elements.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet Club</title>
</head>
<body>
  <h1>Club topics</h1>
  <div class="topic">Nature</div>
  <div class="topic">Travel</div>
  <div class="topic">Poetry</div>
</body>
</html>