HTML and CSS Reference
The id attribute
Because you've already used ids on <a> elements, and because you already know how
to use a class attribute, you're not going to have to learn much to use the id attribute.
Say you have a footer on your page. There's usually only one footer on any page, so that
sounds like the perfect candidate for an id . Here's how you'd add the identifier footer to
a paragraph that contains the footer text:
Sim ilar to a c lass; just a dd th e
Unlike a class, yo u can only
have one element in your
page with an id o f “footer”.
at tribut e “id ” and choo se a
un ique i d nam e.
<p id="footer"> Please steal this page, it isn't copyrighted in any way </p>
N o spaces or speci al characters
ar e allowed in id n ames.
Giving an element an id is similar to adding an element to a class. The only differences are
that the attribute is called id , not class ; an element can't have multiple ids; and you can't
have more than one element on a page with the same id.
Q: What's the big deal? Why do I need an id just
to prove something is unique on the page? I could
use a class exactly the same way, right?
A: Well, you can always “simulate” a unique id with
a class, but there are many reasons not to. Say you're
working on a web project with a team of people. One
of your teammates is going to look at a class and think
it can be reused with other elements. If, on the other
hand, she sees an id, then she's going to know that's
for a unique element. There are a couple of other
reasons ids are important that you won't see for a few
chapters. For instance, when you start positioning
elements on a page, you'll need each element you
want to position to have a unique id.
Q: Can an element have an id and also belong
to a class?
A: Yes, it can. Think about it this way: an id is just
a unique identifier for an element, but that doesn't
prevent it from belonging to one or more classes (just
like having a unique name doesn't prevent you from
joining one or more clubs).