HTML Grouping: div, span, class and id Explained

What you will learn

So far every element you wrote stood on its own: a heading here, a paragraph there. Real pages need the opposite too: a way to put several elements into one box and treat that box as a single thing. This is called grouping. In this lesson you will learn the <div> container, how to name a group with class and id, how to nest groups, and when a group should not be a <div>.

What is grouping?

Think about a school bag. You do not carry every pen, book and notebook loose in your hands. You put related things into pouches and folders, and then carry the bag.

Grouping in HTML works the same way. You wrap related elements inside one container element. Once they are wrapped, you can:

• Style them together with CSS (one border, one background for the whole group).
• Lay them out on the page (put two groups side by side).
• Find them with JavaScript (hide or show the whole group at once).

The most common container is <div>.

The <div> element

<div> stands for division. It is a generic block container: it has no meaning of its own and no default style. Its only job is to hold other elements.

<div>
  <h2>Welcome to My Website</h2>
  <p>This is a simple introduction.</p>
</div>

Run it and you will notice something surprising: the page looks exactly the same as it would without the <div>. That is normal. A <div> is invisible by default. The grouping exists in the structure of your page, even if your eyes cannot see it yet.

Let’s make the group visible with a border:

<div style="border: 2px solid tomato; padding: 12px;">
  <h2>Welcome to My Website</h2>
  <p>This is a simple introduction.</p>
</div>

Now you can see that the heading and the paragraph belong together inside one box. The style attribute is only for experiments. On real websites you will use a class and a separate stylesheet, which you will learn next in this lesson.

What to know about <div>:

• It is a block element: it starts on a new line and takes the full width available.
• It can contain almost anything: headings, paragraphs, lists, images, other <div> elements.
• It has no meaning. A screen reader or a search engine learns nothing from a <div> except that “some content is grouped here”.

Why group at all? Three examples

1. Style a whole group at once

Without a container, you would have to style every element one by one. With a container, you style the box once:

<div style="background: #fff3e0; padding: 12px;">
  <h2>Today's Goal</h2>
  <p>Finish the lesson on grouping.</p>
  <p>Practice for one hour.</p>
</div>

One background covers all three elements, because they all sit inside one <div>.

2. Arrange groups on the page

Groups can be placed next to each other. The CSS below is something you will learn properly in the Flexbox lesson. For now, just look at the idea: two groups, side by side.

<div style="display: flex; gap: 12px;">
  <div style="border: 2px solid tomato; padding: 12px;">
    <h3>HTML</h3>
    <p>The structure.</p>
  </div>
  <div style="border: 2px solid steelblue; padding: 12px;">
    <h3>CSS</h3>
    <p>The style.</p>
  </div>
</div>

The outer <div> groups the two boxes, and the two inner <div> elements group their own content.

3. Give JavaScript one thing to grab

When a button should hide a whole message box, JavaScript needs one element to hide. If the message is wrapped in a <div>, it can hide the whole group with a single line. Without the wrapper it would have to hide every heading and paragraph separately. You will do this in the JavaScript course.

Naming a group: class and id

A page usually has many <div> elements. To tell CSS and JavaScript which group you mean, you give each one a name using an attribute.

<div class="card" id="welcome-card">
  <h2 class="card-title">Welcome to My Website</h2>
  <p>This is a simple introduction.</p>
</div>

Attribute	Can be used on	Use it for
class	Many elements, as often as you like	A reusable label: “all these are cards”
id	One element only on the whole page	A unique name: “this exact card”

Now the CSS can pick the group by its class name. A class is written with a dot in CSS:

.card {
  border: 2px solid tomato;
  border-radius: 8px;
  padding: 16px;
}

.card-title {
  color: tomato;
}

Every element with class="card" gets the border. Add a second card later and it gets the same style for free. That reuse is the biggest reason to use classes.

Rules for good names:

• Use lower case and hyphens: card-title, not CardTitle or card title.
• A name cannot contain spaces. (Writing class="big card" actually gives the element two classes: big and card.)
• Name things by what they are, not how they look. warning-box is a good name. red-box is a bad name, because tomorrow you may make it yellow and the name will lie.
• An id must be unique. Never use the same id twice on one page.

Tip: Not sure whether to use class or id? Use class. Reach for id only when you need one special, one-of-a-kind element (for example a link that jumps to a section).

Nesting groups

A group can hold other groups. Put a big <div> around several cards to control the width of them all:

<div class="page">

  <div class="card">
    <h2 class="card-title">Welcome to My Website</h2>
    <p>This is a simple introduction.</p>
  </div>

  <div class="card">
    <h2 class="card-title">About Me</h2>
    <p>I am learning HTML step by step.</p>
  </div>

</div>

.page {
  max-width: 480px;
  margin: 0 auto;
}

The .page group keeps everything inside it at most 480px wide and centred. The two .card groups inside do not need to know about it.

Two habits make nested <div> elements easy to read:

1. Indent the content of every <div> by two spaces.
2. When a <div> is long, add a comment after its closing tag, so you always know what you are closing:

<div class="page">
  <div class="card">
    <h2>Long card</h2>
    <p>Imagine many more lines here...</p>
  </div> <!-- /.card -->
</div> <!-- /.page -->

Grouping inside a line of text: <span>

<div> groups blocks. When you only want to group a few words inside a sentence, use <span>. It is the inline partner of <div>.

<p>I am learning <span class="highlight">HTML</span> step by step.</p>

.highlight {
  background: yellow;
}

Only the word “HTML” gets the yellow background. Here is how the two containers compare:

	<div>	<span>
Type	Block	Inline
Starts on a new line?	Yes	No
Width	Full width available	Only as wide as its content
Use it to group	Whole elements (heading + paragraph)	A few words inside a line
Can contain a <div>?	Yes	No

Grouping is not always a <div>

<div> is a good tool, but it says nothing about what the group is. HTML also has containers that do carry meaning: <header>, <nav>, <main>, <section>, <article>, <aside> and <footer>. They look the same as a <div> in the browser, but they tell screen readers and search engines what the group is for. You will meet them in the semantic elements lesson.

The rule to remember:

Choose the most meaningful element that fits. Use <div> (or <span>) only when nothing more meaningful exists.

For example, a list of links is a <ul>, not a <div> full of links. A page footer is a <footer>, not <div class="footer">. A card that just holds a heading and some text, with no better element to describe it, is a perfect job for <div>.

Common mistakes

• Putting a <div> inside a <p>. A paragraph can only hold text and inline elements. The browser closes the paragraph early and your page ends up different from what you typed:

  <!-- Wrong -->
  <p>Some text <div>a box</div> more text</p>
  
  <!-- Right: the div wraps the paragraph, not the other way round -->
  <div>
    <p>Some text</p>
    <p>more text</p>
  </div>

• Forgetting the closing </div>. Everything after it ends up inside the box. Indent your code and add closing comments to catch this.

• Using <div/>. In HTML the slash does nothing and the <div> stays open. Always write <div></div>.

• Using the same id twice, or writing an id that starts with a number or contains spaces.

• Naming a class after its looks, such as red-box or big-text. Name it after its job: warning-box, page-title.

• Div soup. Wrapping every single element in its own <div> “just in case”. Group only when the group has a reason: styling, layout, or scripting.

• Using a <div> where a meaningful element exists, like <div> instead of <ul>, <button> or <footer>.

Practice

1. Use the Practice in Editor button. Change the border colour of .card to steelblue and see both cards change together.

2. Add a third card with its own heading and paragraph inside .page. Notice that you do not need to write any new CSS.

3. Wrap the word “step by step” in a <span> with a new class called underline, then style it with text-decoration: underline.

4. Fix this code (it has two mistakes: a <div> inside a <p>, and a missing closing tag):

   <div class="card">
     <h2>My Hobbies</h2>
     <p>I like <div class="highlight">coding</div> and cricket.</p>

Recap

• Grouping means wrapping related elements in one container so you can style, arrange or script them together.
• <div> is the generic block container. It is invisible by default and has no meaning.
• <span> is the generic inline container for a few words inside a line.
• Use class for reusable names and id for one unique element. Name by job, not by looks.
• Containers can be nested. Indent them and label long closing tags.
• Prefer a meaningful element (<ul>, <footer>, <section>…) whenever one fits, and use <div> only when none does.