References

Beginner-friendly references for web development, with live, editable examples.

The HTML class attribute

Global attribute Works on every element All modern browsers Updated
Quick answer

The HTML class attribute adds one or more space-separated class names to an element. Those names are the hooks that CSS selectors (.name) and JavaScript (classList, querySelector) use to style and target the element. It is a global attribute, so it works on every HTML element.

Overview

The class attribute is a global attribute — it can be used on any HTML element. It assigns one or more class names to that element, and those names are the single most common hook for CSS styling and JavaScript scripting.

In CSS, a class is targeted with a leading dot — .card { } styles every element with class="card". In JavaScript, classes are read and changed through the classList API (add(), remove(), toggle(), contains()) and matched with document.querySelectorAll('.card').

An element can hold several classes separated by spaces (class="btn btn-primary"), and the same class can be reused across many elements — that reusability is what makes classes ideal for styling. When you need to reference a single, unique element instead, use the id attribute. Class names are case-sensitive, and the order they appear in the attribute has no effect on CSS specificity.

Syntax

<!-- A single class -->
<div class="card">…</div>

<!-- Multiple classes, separated by spaces -->
<button class="btn btn-primary is-active">Save</button>

<!-- Targeted from CSS -->
.card { padding: 1rem; }

<!-- Targeted from JavaScript -->
document.querySelector('.card').classList.add('is-active');

Values

Value
A space-separated list of one or more class names (case-sensitive).

Example

Live example 
<style>
.note { padding: 10px 14px; border-radius: 8px; background: #eef5ff; }
.note.warning { background: #fff3cd; }
.bold { font-weight: 700; }
</style>

<p class="note bold">A reusable styled note.</p>
<p class="note warning">The same class, plus a modifier.</p>

Best practices

  • Name classes by what the content is, not how it looks — .alert or .nav-link ages better than .red or .float-left.
  • Adopt a naming convention such as BEM (block__element--modifier) on larger projects so class names stay predictable and collision-free.
  • Reuse a class for shared styling instead of repeating CSS rules; reach for an id only when you need a single, unique hook.
  • Separate multiple classes with single spaces. Their order in the attribute does not change specificity, so group them for readability (base class first, then modifiers).
  • Start class names with a letter and stick to letters, digits, hyphens and underscores so they work in CSS selectors without escaping.
  • Prefer classes over the style attribute for styling, so presentation stays in your stylesheet and can be reused and cached.

Accessibility

The class attribute carries no semantic meaning and is never exposed to assistive technology — adding, removing or renaming a class never changes how an element is announced by a screen reader. Keep that in mind when you build accessible components:

  • Do not use a class alone to convey state. A .is-open or .active class styles the element, but you must pair it with the matching ARIA attribute (such as aria-expanded or aria-current) so the state is actually communicated.
  • A class is the usual hook for "visually hidden" utility text — a .sr-only / .visually-hidden class lets you add labels that are read by screen readers but not shown on screen.
  • Never rely on a class name itself (for example class="error") to inform users — the error must also be conveyed with visible text and an appropriate role or aria-* attribute.

Frequently asked questions

What is the HTML class attribute?
The class attribute assigns one or more space-separated names to an HTML element. CSS and JavaScript then use those names to style and select the element. It is a global attribute, so it can be added to any element.
Can an element have more than one class?
Yes. List several class names separated by single spaces, for example <div class="card card--featured is-active">. Every listed class applies at once.
What is the difference between class and id?
A class can be reused on many elements and is matched in CSS with a dot (.name). An id must be unique on the page and is matched with a hash (#name). Use classes for shared styling and ids for a single, unique hook or in-page link target.
How do I select a class in CSS?
Prefix the class name with a dot: .card { color: navy; } styles every element whose class contains card. Combine selectors like .card.is-active to match elements that have both classes.
How do I add or remove a class with JavaScript?
Use the classList API: el.classList.add('open'), el.classList.remove('open'), el.classList.toggle('open') and el.classList.contains('open').
Are HTML class names case-sensitive?
Yes. class="Card" and class="card" are two different classes, and the matching CSS selector must use the same case.
Can a class name start with a number?
HTML accepts almost any non-empty token, but a CSS selector that starts with a digit has to be escaped, which is awkward. Start class names with a letter and use only letters, digits, hyphens and underscores to keep them easy to target.
Does the order of classes in the attribute matter?
No. The order of names inside the class attribute does not affect CSS specificity or which rule wins. The cascade is decided by selector specificity and the order of the rules in your stylesheet, not the order in the attribute.
autofocus contenteditable