HTML Class Attribute
The class attribute defines one or more class names for an element. It can also be used by JavaScript to make changes to HTML elements.
The HTML class attribute assigns one or more class names to an element. Those names are the main hook that CSS and JavaScript use to find the element and style it or change it.
Why use the class attribute
The reason classes matter is separation of concerns. Your HTML describes the structure of the page, while the styling lives in a style sheet. The class attribute is the link between them, and that link has two important properties:
- Reusable. The same class can be applied to as many elements as you like — a
<h2>, a<p>, and a<button>can all shareclass="highlight"and pick up the same rule. Write the style once, apply it everywhere. - A targeting handle. A class is a label you can select on. In CSS you select it with a dot (
.highlight); in JavaScript you find or change it through the DOM. Without classes you would have to style every element inline and repeat yourself constantly.
In HTML5, the class attribute is a global attribute, so you can use it on any element.
class vs. id
Both class and the id attribute label elements so you can target them, but they answer different questions:
- An
idmust be unique in the document — exactly one element carries a given id. Reach for it when you mean this one specific element (a JavaScript hook, an in-page anchor target). - A
classis reusable — any number of elements can share it, and one element can carry several classes. Reach for it whenever a style or behavior applies to a group of elements.
In day-to-day styling, class is the one you want most of the time, because design is built from repeated, shared patterns.
Valid class names
The name should begin with a letter (a–z or A–Z), a hyphen (-), or an underscore (_), and may then contain letters, digits (0–9), hyphens, and underscores. Class names are case sensitive, so card and Card are different classes. It is best to name classes after the element's purpose, not its appearance — intro ages better than big-red.
<!-- Valid -->
<div class="my-card"></div>
<div class="_intro card2"></div>
<!-- Invalid -->
<div class="1card"></div> <!-- cannot start with a digit -->
<div class="my card"></div> <!-- a space here means TWO classes, not one -->The last line is a common surprise: a space inside the attribute value does not create a single name with a space — it separates the value into multiple class names.
Syntax
<tag class="classname"></tag>Example of the HTML class attribute
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.red {
color: red;
}
.orange {
color: orange;
}
</style>
</head>
<body>
<h1>Example of the HTML class attribute</h1>
<p class="red">It is some red paragraph.</p>
<p>This is a some text.</p>
<p class="orange">It is some orange paragraph.</p>
</body>
</html>In CSS, to select every element with a specific class, write a period (.) followed by the class name. See CSS Selectors for the full set of ways to target elements.
Example of the HTML class attribute used with CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #1c87c9;
color: #ffffff;
padding: 20px;
}
</style>
</head>
<body>
<h1>Example of the class attribute</h1>
<h2 class="title">Heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<h2 class="title">Heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>You can also manipulate the class attribute from JavaScript through the element's classList property. Its three most-used methods are:
classList.add('name')— adds a class (does nothing if already present).classList.remove('name')— removes a class.classList.toggle('name')— adds the class if it is absent, removes it if present. Ideal for on/off states such as "active" or "open".
Example of the HTML class attribute used with JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="demo">Click a button to change this paragraph's class.</p>
<button onclick="document.getElementById('demo').classList.add('highlight')">Add</button>
<button onclick="document.getElementById('demo').classList.remove('highlight')">Remove</button>
<button onclick="document.getElementById('demo').classList.toggle('highlight')">Toggle</button>
</body>
</html>HTML elements can also have more than one class name. Each of them must be separated by a space.
Example of the HTML class attribute with multiple class names
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #202131;
color: #dddddd;
padding: 15px 25px;
}
.text-right {
text-align: right;
}
</style>
</head>
<body>
<h1>Example of multiple classes</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title">London</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title text-right">Paris</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title">Tokyo</h2>
</body>
</html>Different tags, such as <h2> and <p> can have the same class name and the same style.
Example of the HTML class attribute with the <h2> and <p> elements
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grey-text {
color: #808080;
}
</style>
</head>
<body>
<h1>Example of the class attribute </h1>
<h2 class="grey-text">Heading</h2>
<p class="grey-text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Accessibility note
Class names carry no meaning for screen readers or other assistive technologies — they exist purely for styling and scripting. A class="button" on a <div> is not announced as a button. So a class is never a substitute for choosing the right semantic element (use a real <button>) or for adding ARIA where it is needed. Reach for classes to style; reach for semantics to convey meaning.
In HTML 4.01 the class attribute was disallowed on a handful of head-level elements (such as <head>, <html>, <base>, <meta>, <script>, <style>, and <title>). This restriction is historical: in HTML5 class is a global attribute allowed on every element, so you no longer need to worry about it.