Layout & Structure›Core· 40 min read

Div, Span, Classes & IDs

The “containers” of HTML and the hooks that CSS and JavaScript use to find your elements.

What you will learn

Group elements with <div> and <span>
Add class and id attributes
Know when to use class vs id

Containers: <div> and <span>

A <div> is a generic block container — it groups a chunk of the page. A <span> is a generic inline container — it wraps a small piece of text inside a line.

<div> = block group, <span> = inline group

<div>
  <h2>Card title</h2>
  <p>This whole card is grouped in a div.</p>
</div>
<p>I feel <span>only these words</span> are wrapped in a span.</p>

Live preview

The <div> wraps a heading and a paragraph into one block group — a “box” you could later move or style as a unit. The <span> wraps just three words inside a sentence, without breaking the line. Right now neither changes the look; they exist to group content so CSS and JavaScript can grab it later.

Note: Output: Card title (heading) This whole card is grouped in a div. I feel only these words are wrapped in a span. (all on one line)

Class and id: naming your elements

class — a reusable label. Many elements can share the same class.
id — a unique label. Only one element per page should have a given id.

Two cards sharing the same classes

<div class="card">
  <h2 class="card-title">Plan A</h2>
  <p>Reusable class — other cards can use it too.</p>
</div>

<div class="card">
  <h2 class="card-title">Plan B</h2>
  <p>Same classes, different content.</p>
</div>

Live preview

Both <div> boxes carry class="card", and both headings carry class="card-title" — even though their text differs. That is the point of a class: it is a reusable label many elements can share, so later one CSS rule can style every card at once.

Note: Output: Two plain stacked boxes (Plan A and Plan B). They look unstyled for now — the shared class names are the hooks you will style in CSS.

Tip: An element can have several classes, separated by spaces: class="card featured". Rule of thumb: use a class almost always; reserve id for the one-of-a-kind element (like a section you link to).

Note: You cannot see classes do anything yet — that is intentional. In CSS you will write .card { ... } to style every element with class="card" at once. Today you are placing the hooks.

Q. You want the same style on many elements. Which attribute fits best?

Answer: A class is reusable — many elements can share it. An id must be unique to one element.

✍️ Practice

Build three “card” divs sharing class="card", each with a heading and paragraph.
Give one special element a unique id and wrap one word in a <span class="highlight">.

🏠 Homework

Group a profile (photo, name, bio) inside <div class="profile"> with sensible classes on the inner elements.