EN

HTML・Organizing information

Make groups (div and span)

They carry no meaning on their own, but they bundle several tags into "one group." div and span are the prep work for decorating things later.

The tags so far—headings, paragraphs, images—each carried a “meaning.” Today’s two, <div> and <span>, are a bit of an odd pair. They have no special meaning of their own; they exist only to “group things together.”

div is a big group

<div> wraps several tags all together and turns them into one group.

<div>
  <h2>About the Shop</h2>
  <p>We're open from 10 a.m. to 8 p.m.</p>
</div>
Wrapping in a div doesn’t change the look, but the heading and paragraph become one group.

This <div> changes nothing about the appearance. But it creates a group: “the heading and paragraph, brought together as one ‘shop info block.’” Later, decorations like “make just this block’s background gray” can all be done at once.

span is a pinch within a sentence

<span> is a box for pinching just a part of a sentence. Without breaking the line, it grabs a bit right there on the spot.

<p>The sky today is <span>very blue</span>.</p>
Wrapping in a span doesn’t break the line, and the look stays the same. It’s just pinching a part of the sentence.

This one, too, changes nothing about the look. But when you want to, say, “change the color of just the ‘very blue’ part later,” wrapping it in <span> lets you target it precisely.

Comparing the two

They may look alike, but they behave differently once they wrap something. Let’s line them up.

<div><span>
What it wrapsgroups of tags like headings and paragraphsa part of a sentence
How it handles linesbreaks the line before and after (block)keeps the line as is (inline)
Where to use itintro blocks, the basis of cardschanging color in a sentence, emphasizing a name

Pick by asking “is what I want to wrap a group, or a pinch?” and you won’t get lost.

Putting a box inside a box

You can put another <div> inside a <div>. Picture tucking a small box inside a big box.

<div>
  <h2>About the Shop</h2>
  <div>
    <p>We're open from 10 a.m. to 8 p.m.</p>
    <p>We're closed on Wednesdays.</p>
  </div>
</div>
Nesting boxes doesn’t change the look. The contents just line up from top to bottom in order.

The deeper the nesting gets, the easier it is to mismatch opening and closing tags. If you indent the contents one step at a time, you can see at a glance which </div> closes which <div>.

CSSDecorate "on target" with classesThe way to name a box you’ve grouped and target it precisely with CSS comes up in this lesson of the CSS course

Summary of this lesson

  1. <div> is a box that groups several tags into a block
  2. <span> is a box that pinches just a part of a sentence
  3. Neither carries meaning—they’re “markers for decorating later”

Try it: group your self-introduction

On Shima’s page, let’s use one <div> and one <span>. Pinch just the name in the greeting heading with a <span>, and group the self-introduction heading and paragraph with a <div>.

<h1>Hi, I'm <br><span>Shima</span>.</h1>

<div>
  <h2>About Me</h2>
  <p>Hi! I'm Shima. I love drawing, and on weekends I often go out for ramen.</p>
</div>

<h1> is the greeting you already wrote. Wrapping just the name “Shima” in a <span> lets you change the color of just that part later with CSS. The <div> around the self-introduction is the basis of the white card on /goal—it’s this group with color added.

Neither changes the look just yet. For now, simply placing the markers is all you need.

FAQ

What is the difference between div and span?
div is a block box that breaks the line before and after it and stacks from top to bottom. span is an inline box that stays on the same line and sits within the flow of the text. Use div to wrap a group, and span for just a part inside a sentence.
Is it okay to put a div inside a div?
Yes. Just like putting smaller boxes inside a box, you can nest div as many levels deep as you like. The catch is that it's easy to mismatch the closing tags, so the trick is to line up the indentation as you write.
Is it bad to use div for everything?
If you can write it with a meaningful tag—a heading tag for a heading, a paragraph tag for a paragraph—that comes first. Think of div and span as boxes for when there's no tag with just the right meaning.