class (HTML attribute)
While the name of an element specifies its type, the
Note that the
class attribute cannot be applied to the following elements:
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 and will still be valid HTML; for example,
<div class="3-col-wide"> … </div>. However, it’s best avoided as the CSS 2.1 specification says that CSS identifiers, which would include the class name that matches the
class attribute in the HTML, should not begin with a digit. By not starting class names with a digit, you’ll be keeping both HTML and CSS validators happy.
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.