Classes and IDs

As your page grows, you will often want to single out one particular element, or a group of similar elements, so you can style them or refer to them later. HTML gives you two attributes for exactly this purpose: class and id.

Classes

A class is a label you can attach to any tag, and the same class name can be reused on as many elements as you like. This is perfect for grouping things that should share a style, like every "highlight" paragraph on your page.

<p class="highlight">This paragraph is extra important.</p>
<p class="highlight">So is this one.</p>
<p>This one is just a regular paragraph.</p>

On its own, adding a class does not change how anything looks. A class is just a label; it is CSS, a different language you may meet later, that actually reads the class name and decides how to style it. For now, think of a class as sticking a named tag on an element so it can be found later.

IDs

An id works like a class, but with one important difference: an id must be unique on the page. You use it to label exactly one specific element, like the main page title or a specific section.

<h1 id="page-title">Alex's Website</h1>

Choosing good names

Class and id names should describe what the element is or does, not how it currently looks. A name like intro or contact-section will still make sense even if you completely redesign your page later, while a name like blue-text stops making sense the moment you change the color to green.

<div class="callout">
<p>Remember to save your work often!</p>
</div>

You have actually been looking at a class in action throughout this entire course: the little tip boxes you see, like the one right above, use a div tag with class="callout" on it. That single class name is what lets every callout box on Gwecode share the same look.

Why this matters for your page

You do not need to write any CSS in this course to benefit from understanding classes and ids. Simply knowing that you can label any element this way means you are ready for the day you do want to add your own styles, and it means you will recognize this pattern everywhere you look at other people's HTML from now on.

With semantic tags, classes, and ids all in your toolkit, you are ready for the final lesson: bringing everything you have learned together into one real page.