Description

While the name of an element specifies its type, the class attribute lets you assign to it one or more subtypes. These subtypes may then be used in CSS code for styling purposes, or by JavaScript code (via the Document Object Model, or DOM) to make changes, or add behavior, to elements belonging to a particular subtype.

Value

This attribute takes as its value a space-delimited list of one or more class names. Unlike the id attribute, the class attribute’s value may begin with a number; for example, <div class="3-col-wide"> … </div>.

While there have been numerous calls from the developer community to specify a standard set of class names and associated meanings, at the moment you’re free to specify whatever class names make sense to you. As with all HTML markup, however, it’s recommended that you use names that are as semantically meaningful as possible; the class name should indicate to a human who reads it what that element’s purpose or meaning is, rather than how it looks. Hence, purely presentational class names like "large" or "shiny" are bad practice, while class names such as "executive-summary" or "key-findings" provide some useful information to those reading the markup.

While it’s good to make the markup human-readable, the developer community has made great strides in standardizing the usage of class names for certain types of information on the Web, such as contact details or calendar events, so that the markup can also be read, or parsed, by web-based services to great effect. The result of this standardization effort is known as Microformats.

Compatibility

As with the id attribute, compatibility issues with class generally depend on the way it’s used or accessed by CSS and JavaScript; the presence or lack of a class name on any attribute won’t adversely affect its display in HTML when style sheets or JavaScript aren’t linked.

It is perfectly valid—indeed, it’s extremely useful—to apply multiple values in the class attribute; for example, applying both class="friend colleague" or class="spouse muse", and have CSS combine different styles depending on the classes in use.