Attributes
Learning Objectives:
In this section, students will:
- Learn the differences between ID and class attributes.
- Begin to be able to identify situations where one type of attribute is more useful than the other.
Attributes
Elements are not limited to simply describing text. They can also have information contained within their code. These types of entries are called attributes.
Similar to describing an animal, the most general type would be simply that, animal. However, what if there were lots of things around called “animal?” There would need to be a way to find a single entry among the large number of them. That’s where attributes are used in HTML.
ID
The singular most useful attribute in HTML is the ID of an element. In the metaphor of the collection of animals, an ID can be thought of a unique way to find a single animal among a crowd of them.
In HTML, an ID is given to an element by writing it inside the initial, opening tag. The ID, like other attributes, starts with its name “id” and is followed by the equal sign and then the value, in quotations.
This pattern of using the equal sign is borrowed from other programming languages and is read, from left to right as “the ID is equal to the value.” The use of quotations is also important. Because sometimes HTML can be very complex for large, interconnected websites, the use of quotations helps contain the value.
There are also two important rules for the ID attribute: there are no spaces allowed and it cannot start with a number. The value of an ID attribute must start with a letter and is also case-sensitive. This means that the values “SecondParagraph” and “secondParagraph” are different.
Class
Along with an ID, something unique within a HTML document, this is also another common attribute: class. Coming back to the metaphor of animals, a single, individual animal would have an ID and could thus be found among many of them. But what if a group of them was wanted?
The attribute Class can help. It can be thought of as “classification”: a way to group different elements together. In fact, since a classification is more general than a unique ID, elements can have both.
An animal might have various classifications. It might be a cat found in the forest or a bat found in a cave. Thinking of loose classifications, an animal might have as many as is useful to help classify it.
The same is also true of elements. They can have multiple values for their Class attribute. Each new value is separated by a single space.
Play with the Code:
Take a moment to play with the code and concepts in the embedded viewer below. Watch how code added in the HTML window is updated in the Result window.
Try It Yourself!
Based on the ongoing CV example from previous modules, update it using ID and class attributes.
- For each section like "Skills", give the element containing that content an ID attribute. Start to consider which elements would work best with a class attribute. (These will be used in later modules for similar styling using CSS.)
Test your response on Mozilla Thimble Links to an external site.!