IDs and Classes

As you build your stylesheets (or maybe even scripts, if you're learning JavaScript), sooner or later, you'll want a way to target a specific element or group of elements on the page. This is where IDs and classes come in handy, as they act as nametags for the elements that you apply them to, letting you target that name in particular for styling or scripting.

Some features of HTML are more useful for allowing other languages to hook into them. IDs and classes are a good example of this. They don't do much on their own, so don't fret if adding them to your page does nothing.

Using IDs and classes

To give an element an ID, add the id attribute and give it a good, specific name without spaces in it. Any element can take an ID.

<a href="home/" id="homelink">Return home</a>

This link now has the ID of homelink. Similarly, to give an element a class, add the class attribute. Any element can take a class too.

<a href="home/" class="navlink">Return home</a>

If you'd like to give an element multiple classes, split them apart by spaces. This example has two classes, navlink and border.

<a href="home/" class="navlink border">Return home</a>

And yes, you can have both on an element too:

<a href="home/" id="homelink" class="navlink border">Return home</a>

As of right now, these all do nothing because they require a stylesheet or a script to make our classes mean something. In a stylesheet, IDs are referenced with a # (hash), while classes are referenced with a . (period). If you applied the following stylesheet to your page, the homelink would be colored brown, the navlink elements would be bolded, and the border elements would grow a solid border.

#homelink { color: brown; }
.navlink { font-weight: bold; }
.border { border-style: solid; }

So if classes and IDs are both used to name elements, why have two attributes? Can't you just use the one for everything? The answer is yes, but there are key difference between the two that make each one more useful in certain situations.

Where classes are more useful

The big difference between classes and IDs is that each ID has to be unique to that element. Two elements cannot share the same ID. Classes, on the other hand, can be reused infinitely across the same page. A good example of where classes are useful is if you're trying to have certain images float to the side of a page, like a newspaper. In your stylesheet, you can make all images of a certain class float to the right, while IDs can only target a single image, as they can't be reused.

.border { border-color: blue; border-style: solid; }
.yurble { float: left; }
.xweetok { float: right; }

<img src="yurble.gif" class="border yurble" alt="Yurble">
<img src="xweetok.gif" class="border xweetok" alt="Xweetok">
<p>Our "float left" CSS only targets <code>.yurble</code>, while our "float right" CSS only targets <code>.xweetok</code>, hence why both are positioned where they are. Both have the class .border, meaning they both have a blue border around them.</p>

Of course, obviously, there's no requirement you have to reuse a class. If it's easier for you to just use classes for everything, even where you're only targeting one element, you can just use classes.

Where IDs are more useful

IDs also have their uses, however. IDs, for example, can be used to link to different sections on the same page, even from other pages. If you're writing a long page and want a table of contents, you can use IDs to name your headings and link to each one, allowing your readers to jump around the page quickly and easily.

<h2 id="class">Where classes are more useful</h2>
<p>The big difference between classes and IDs is that each ID has to be unique to that element. Two elements <em>cannot</em> share the same ID. Classes, on the other hand, can be reused infinitely across the same page. A good example of where classes are useful is if you're trying to have certain images float to the side of a page, like a newspaper. In your stylesheet, you can make all images of a certain class float to the right, while IDs can only target a single image, as they can't be reused.</p>

To link to this <h2>, you'd use #class as your link's href. If you're linking to an ID on another page, link to that page like normal and add the ID to the very end of the href.

<a href="advanced/html/ids-and-classes/#class">Section 2: Where classes are more useful</a>

There's a special ID, #top, that takes the reader back to the very top of the page. You don't need to set this ID for it to work.

<a href="#top">Back to top</a>

For those writing JavaScript, IDs also allow you to use the getElementById method to quickly access any specific ID on a page.