The Class Attribute:

In addition to the ID attribute, another attribute that is valid in every HTML element is the “class” attribute.

HTML
<div class="a-unique-class-name" id="a-unique-id">

Like the ID attribute, the class attribute is an identifier and selector value for HTML elements. The class attribute groups similar types of elements together by using the same unique name value. This allows for easy styling of these elements with same CSS code.

The class attribute also serves to visually inform developers that certain elements content similar types of content, or serve a similar function on a page.

Style Conventions

The class attribute follows the same technical naming conventions as the ID attribute. As with the ID attribute, the class attribute value should be as descriptive as possible about the function or element types groups, while prioritizing both brevity and readability.

More Than One Class

Unlike the ID attribute which should contain a single unique ID value, elements may have more than one class assignment. In this case, a space separates each class.

HTML
<div class="class-name-1 class-name-2 notice-the-space">
    Notice the space between each of the three class names.
</div>

{ TODO: }

Read page 184 of Chapter 08 in Duckett.


Previous section:
Next section: