Learn HTML and CSS: Div and span

Div and span

Hilary wants the opening hours in a coloured box, and the word "closed" in red. There's no element that means "box" or "red". That's what the two empty boxes are for.

Boxes without meaning

A <div> is a box without meaning. You put other elements in it to style them together: a box around two paragraphs, with one class.

A <span> does the same inside a line of text: a bit that gets its own style, like the word closed.

The difference: a <div> starts on a new line and takes the full width, a <span> simply stays in the line.

The shelter's CSS gives .box a background and .closed a red colour.

index.html

1<main>2  <h2>Opening hours</h2>3  <div class="box">4    <p>Open on Wednesdays and Saturdays from 1 pm to 5 pm.</p>5    <p>On Sundays we're <span class="closed">closed</span>.</p>6  </div>7</main>

asiel.example

Better an element with meaning

A <div> and a <span> say nothing about what's inside. With CSS you can make a <div> look like a heading, but a screen reader then hears plain text, and Google sees no chapters.

If there's an element that says what something is, use that one: <h2> for a heading, <ul> for a list, <nav> for a menu, <strong> for importance.

A <div> or <span> is for whatever's left: a box that's only there for the CSS. Look at the tree: this heading isn't a heading at all.

index.html

1<link rel="stylesheet" href="style.css">2<main>3  <div class="title">Our cats</div>4  <div>Misty and Felix love lying in the sun.</div>5</main>

style.css

1.title {2  margin-top: 16px;3  font-size: 1.5rem;4  font-weight: bold;5}

asiel.example

Try it yourself

Put the two paragraphs together in a <div class="box">, and the word closed in a <span class="closed">.

1<main>2  <h2>Opening hours</h2>3  <p>Open on Wednesdays and Saturdays from 1 pm to 5 pm.</p>4  <p>On Sundays we're closed.</p>5</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fffaf3;5  color: #3d2b1f;6}7header {8  padding: 20px 16px 14px;9  background: #f6c88f;10}11header h1 {12  margin: 4px 0 0;13}14.slogan {15  margin: 4px 0 10px;16}17nav ul {18  display: flex;19  flex-wrap: wrap;20  gap: 4px 18px;21  margin: 0;22  padding: 0;23  list-style: none;24}25nav a {26  color: #7a3e12;27  font-weight: bold;28}29main {30  padding: 8px 16px 24px;31}32table {33  border-collapse: collapse;34}35th,36td {37  padding: 6px 12px;38  border: 1px solid #e3c9a8;39  text-align: left;40}41th {42  background: #fbe3c4;43}44.card {45  margin: 12px 0;46  padding: 12px 16px;47  border-radius: 16px;48  background: #ffffff;49}50.card h3 {51  margin: 4px 0;52}53.box {54  padding: 4px 16px;55  border-radius: 16px;56  background: #fde9d4;57}58.breed {59  color: #b5541c;60}61.closed {62  color: #b42318;63  font-weight: bold;64}65footer {66  padding: 12px 16px;67  background: #f6c88f;68}

asiel.example

Ready for more?

The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

Boxes without meaning

A <div> is a box without meaning. You put other elements in it to style them together: a box around two paragraphs, with one class.

A <span> does the same inside a line of text: a bit that gets its own style, like the word closed.

The difference: a <div> starts on a new line and takes the full width, a <span> simply stays in the line.

The shelter's CSS gives .box a background and .closed a red colour.

index.html

1<main>2  <h2>Opening hours</h2>3  <div class="box">4    <p>Open on Wednesdays and Saturdays from 1 pm to 5 pm.</p>5    <p>On Sundays we're <span class="closed">closed</span>.</p>6  </div>7</main>

asiel.example

Better an element with meaning

A <div> and a <span> say nothing about what's inside. With CSS you can make a <div> look like a heading, but a screen reader then hears plain text, and Google sees no chapters.

If there's an element that says what something is, use that one: <h2> for a heading, <ul> for a list, <nav> for a menu, <strong> for importance.

A <div> or <span> is for whatever's left: a box that's only there for the CSS. Look at the tree: this heading isn't a heading at all.

index.html

1<link rel="stylesheet" href="style.css">2<main>3  <div class="title">Our cats</div>4  <div>Misty and Felix love lying in the sun.</div>5</main>

style.css

1.title {2  margin-top: 16px;3  font-size: 1.5rem;4  font-weight: bold;5}

asiel.example

Try it yourself

Put the two paragraphs together in a <div class="box">, and the word closed in a <span class="closed">.

1<main>2  <h2>Opening hours</h2>3  <p>Open on Wednesdays and Saturdays from 1 pm to 5 pm.</p>4  <p>On Sundays we're closed.</p>5</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fffaf3;5  color: #3d2b1f;6}7header {8  padding: 20px 16px 14px;9  background: #f6c88f;10}11header h1 {12  margin: 4px 0 0;13}14.slogan {15  margin: 4px 0 10px;16}17nav ul {18  display: flex;19  flex-wrap: wrap;20  gap: 4px 18px;21  margin: 0;22  padding: 0;23  list-style: none;24}25nav a {26  color: #7a3e12;27  font-weight: bold;28}29main {30  padding: 8px 16px 24px;31}32table {33  border-collapse: collapse;34}35th,36td {37  padding: 6px 12px;38  border: 1px solid #e3c9a8;39  text-align: left;40}41th {42  background: #fbe3c4;43}44.card {45  margin: 12px 0;46  padding: 12px 16px;47  border-radius: 16px;48  background: #ffffff;49}50.card h3 {51  margin: 4px 0;52}53.box {54  padding: 4px 16px;55  border-radius: 16px;56  background: #fde9d4;57}58.breed {59  color: #b5541c;60}61.closed {62  color: #b42318;63  font-weight: bold;64}65footer {66  padding: 12px 16px;67  background: #f6c88f;68}

asiel.example