HTML class Attribute

HTML class Attribute

The HTML class attribute assigns one or more class names to an HTML element. Classes are commonly used to select elements for CSS styling and JavaScript and can be shared by multiple elements throughout a document.

Syntax

The class attribute is added to an HTML element and contains one or more class names.

<p class="notice">Important information.</p>

When an element belongs to more than one class, the class names are separated by spaces.

<p class="notice important">Important information.</p>

Attribute Value

The value of the class attribute is a set of space-separated class names.

A class name cannot contain ASCII whitespace because whitespace separates one class name from another.

Elements That Use the class Attribute

The class attribute can be specified on all HTML elements.

Using a Single Class

A single class can be assigned to one element or reused on multiple elements.

<p class="highlight">This paragraph belongs to the highlight class.</p>

<p class="highlight">This paragraph uses the same class.</p>

Using the same class on several elements makes it possible to select those elements as a group.

Using Multiple Classes

An element can belong to several classes at the same time. Separate each class name with whitespace inside the class attribute.

<p class="message important">Important message.</p>

In this example, the paragraph belongs to both the message and important classes. Each class can provide a different set of styles or be used independently by scripts.

Using Classes with CSS

CSS class selectors begin with a period followed by the class name.

.highlight {
  background-color: #ffffcc;
  padding: 10px;
}

The selector matches elements whose class attribute includes the highlight class.

<p class="highlight">This paragraph is highlighted.</p>

The same CSS class can be applied to different types of HTML elements.

Using Classes with JavaScript

JavaScript can find and work with elements according to their classes. The DOM also provides the classList interface for examining and changing an element's classes.

const message = document.querySelector(".message");

message.classList.add("important");

JavaScript can add, remove, replace, toggle, or test class names without replacing the element's entire class attribute.

class vs. id

The class and id attributes can both identify elements for CSS and JavaScript, but they serve different purposes.

<p id="intro" class="lead">Introduction text.</p>

<p class="lead">Additional lead text.</p>

Both paragraphs can share the lead class, while only one element should use the intro ID.

Choosing Class Names

Class names can be chosen by the author and should generally describe the purpose or meaning of the content rather than a specific visual appearance.

<!-- Describes the purpose -->
<p class="warning">Please check your information.</p>

Meaningful class names make HTML and CSS easier to understand and maintain when a site's design changes.

Class Names and Letter Case

In standards-mode HTML documents, class names are matched case-sensitively by CSS class selectors. For example, notice and Notice are different class names.

<p class="notice">First paragraph</p>
<p class="Notice">Second paragraph</p>

Using consistent lowercase class names is a common convention and helps prevent accidental mismatches between HTML, CSS, and JavaScript.

Common Mistakes

Do not separate multiple class names with commas. Class names are separated by whitespace.

<!-- Incorrect -->
<p class="message, important">Message</p>

<!-- Correct -->
<p class="message important">Message</p>

Do not include the CSS period in the HTML class value. The period is part of CSS class-selector syntax, not the class name itself.

<!-- Incorrect -->
<p class=".highlight">Text</p>

<!-- Correct -->
<p class="highlight">Text</p>

Do not assume that a class can be used only once. Unlike an id, a class is specifically useful for grouping multiple elements.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The class global attribute is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the class Attribute

The example assigns classes to several paragraphs. Some elements share the same class, while another element belongs to two classes at the same time.

Summary

The HTML class attribute assigns one or more class names to an HTML element. It can be used on all HTML elements, the same class can be shared by multiple elements, and an element can belong to several classes by separating the class names with spaces. Classes are commonly used to select and organize elements for CSS styling and JavaScript.