🎓 A1Learner
🔍

HTML Div and Span

A div element is a container that groups other elements into a block. A span element is a container that marks a small part inside a line.

Group with a div

A div wraps a heading and a paragraph. They stay together as one group.

<div>
  <h2>City Park</h2>
  <p>The park opens at sunrise.</p>
</div>

Two separate groups

Each div forms its own group. The second group starts after the first one ends.

<div>
  <p>First group of news.</p>
</div>
<div>
  <p>Second group of news.</p>
</div>

Mark part of a line with a span

A span wraps a few words inside a paragraph. The paragraph stays a single paragraph.

<p>The train leaves at <span>nine</span> in the morning.</p>

A div holds a whole section

A div can hold many elements at once. This group holds a heading and two paragraphs.

<div>
  <h2>Our Bakery</h2>
  <p>We bake bread every morning.</p>
  <p>Cakes are ready by noon.</p>
</div>

Example

<!DOCTYPE html>
<html>
<head>
<title>Div and Span</title>
</head>
<body>
<h1>Weekend Guide</h1>
<div>
<h2>Saturday Market</h2>
<p>Fresh bread is on sale at the market.</p>
</div>
<div>
<h2>River Walk</h2>
<p>The walk takes <span>two hours</span> at a slow pace.</p>
</div>
</body>
</html>

Key points

  • Div element: a block container that groups elements together
  • Span element: an inline container for a small part of a line
  • A div groups elements into a block, and a span marks part of a line.
  • Use a div to wrap a heading with the paragraphs under it
  • Meaning: div and span add no meaning to the content they hold

In this example, the page opens with a main heading. The first div groups a market heading with its paragraph. The second div groups a walk heading with its paragraph. A span marks the words two hours inside the last paragraph. Each div starts on its own line because a div is a block element.

Note

Pages often add a class or an id to a div so it can be styled.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

What does a div element do?