# HTML attributes
In this lecture we're going to take a closer look at a pair of important attributes:
One thing we're going to be doing a lot in this course is adding
Unlike many attributes, the
class attribute can be applied to any HTML element. We call this kind of attribute a global attribute.
Here is an example of a
<p> element with a new
class attribute. The value of this attribute is
text, so we've said that this element can be identified by the class
text elsewhere in our program.
<p class="text">I have a class now. Fancy.</p>
We can add multiple classes to an element by writing several class names between the quotation marks, separated by spaces.
<p class="class-one class-two class-three">That's a lot of classes!</p>
Another common attribute which can be used with any HTML element is the
id attribute. Ids are very similar to classes in that they're for identifying particular HTML elements, but unlike classes, ids are supposed to be unique identifiers.
Here is an element with both a
class and an
<h1 class="title awesome" id="pageTitle">
Awesome Page Title
Unlike classes, ids are not generally used for applying styles, because they make it hard to reuse our CSS code. After all any styles we apply to elements with a given id will only affect a single element.
Being able to reuse CSS styles is important to us as developers, because it reduces the opportunity for error, and it also reduces the overall size of our stylesheets, which leads to faster loading websites.
Ids are unique in theory, but this is a convention more than a strict rule. If you add the same id to several HTML elements, the parser won't complain, and your site will work just fine.
While nothing will break, you should respect the convention of having unique ids, as having a unique identifier can be extremely useful. We already have classes for identifying groups of elements, so there's no need to duplicate this pattern with ids as well.
# Other attributes
There are lots of other attributes available to us in HTML, many of which are specific to certain element types. We've already seen one example: the
You don't need to memorise the available attributes, but if you ever need to look something up, you can find a good reference on the MDN Web Docs (opens new window).