You already know id from chapter 16 (jump links). In this chapter we'll take a closer look at id and meet its close sibling: class.

id recapped

• An id is a unique name for exactly one element on the page.
• Every id may only be assigned once per page.
• Useful for jump links (href="#name") and, as you'll soon learn, for targeted CSS styling.

class: a name tag for multiple elements

class works similarly to id, with one important difference: the same class may appear on any number of elements at once. Think of class as a category label, whereas id is more like a unique proper name.

<p class="important">The game starts promptly at 3pm.</p>
<p class="important">Please arrive 30 minutes early.</p>
<p>This is just a normal paragraph with no special marker.</p>

Here, two paragraphs share the same class="important" - that's completely fine, unlike with id.

Multiple classes at once

An element can even have several classes at once, separated by spaces within the attribute value:

<p class="important highlighted">Especially important note!</p>

What it's already good for, even without CSS

Even though class unfolds its full power only with CSS (where you can use it to set colours, spacing, and more for an entire group of elements at once), it's already a good habit to mark important, recurring kinds of content with sensible class names - this makes your code easier to understand for yourself and others, and you'll be perfectly prepared once you learn CSS.

id or class: which one do I use when?

A simple rule of thumb:

• id: for exactly ONE specific, unique element ("the header", "the main menu").
• class: for a category or type that can appear multiple times ("all important notes", "all player cards").

Using classes on Finn's website

Mark important notes on your website with a shared class:

<section>
  <h2>Next Game</h2>
  <p class="important">The game starts promptly at 3pm, please arrive 30 minutes early!</p>
</section>