By Adam Roberts

class (HTML attribute)

By Adam Roberts
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min


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.

Note that the class attribute cannot be applied to the following elements:

  • base
  • basefont
  • head
  • html
  • meta
  • param
  • script
  • style
  • title


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.

Login or Create Account to Comment
Login Create Account
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?