HTML

HTML Class Attribute

The HTML class attribute is a key tool in web development. It lets you assign one or more names to an HTML element. You use these names in CSS and JavaScript to style and manipulate elements. This tutorial shows you how to use the class attribute to keep your design consistent and add dynamic behavior to your pages.

Class Attribute Syntax

To add a class attribute, include it in an HTML tag:

<tag class="classname"></tag>

For example, to assign a class to a <div> element:

<div class="container"></div>

The class value (here, "container") is any valid identifier that meets HTML and CSS naming rules.

Learning Outcomes

After finishing this tutorial, you will be able to:

Explain the purpose of the HTML class attribute and its benefits.
Add the class attribute to various HTML elements.
Use valid CSS selectors to target class names.
Assign one or more classes to an element for styling and dynamic behavior.
Integrate JavaScript with classes for interactivity.
Apply reusable design components using classes.
Follow best practices to avoid common pitfalls with class naming conventions.

What Is an HTML Class?

An HTML class assigns one or more identifiers to an element. These identifiers help you:

Maintain consistency by applying the same style to multiple elements.
Streamline your code by organizing styling into reusable patterns.
Enable interactivity by selecting and modifying groups of elements with JavaScript.

Frameworks like Bootstrap and Tailwind CSS use classes heavily to build modular design systems.

Attribute Values

The class attribute value consists of one or more class names separated by spaces. Each class name must follow these rules:

Valid characters include letters, numbers, hyphens, and underscores.
Class names should not start with a digit.
Use names that describe the purpose of the element.

Example: Using the same class on multiple elements:

<div class="card">Content for card 1</div>
<div class="card">Content for card 2</div>

You can apply the class attribute to any HTML element.

A major advantage of the class attribute is its global use. Any HTML element can share the same class name to gain consistent styling or behavior.

For example, you can use a shared class on a heading and a paragraph:

<h2 class="important">SitePoint Blog</h2>
<p class="important">Articles for web developers and designers to keep up-to-date and learn JavaScript, CSS, UX, WordPress, PHP and more</p>

A shared class like "important" reduces repeated CSS and keeps your design consistent.

Using the Class Attribute

To use the class attribute, add it inside an HTML tag with your chosen class name:

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

To target this element in CSS, prepend the class name with a period:

.highlight {
  background-color: yellow;
  font-weight: bold;
}

The period tells the browser to apply these styles to all elements with the "highlight" class.

Class Attribute Usage

Classes are central to building visually appealing and interactive web pages. Here are some practical examples.

Styling with CSS

When you target a class in your CSS, you apply the same style to every element with that class. For example:

.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}

Apply the "city" class to any element to give it these properties.

Reusable Design Components

Classes allow you to create reusable design elements. For instance, if you set up a class for buttons:

.btn-primary {
  background-color: blue;
  color: white;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}

Then apply it to every button that needs this style:

<button class="btn-primary">Click Me</button>

Background Color and Padding

Here is a simple example to apply background color and padding using a class:

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      background-color: green;
      padding: 5px;
    }
  </style>
</head>
<body>
  <p class="highlight">This is a highlighted paragraph.</p>
</body>
</html>

Hover Effects

You can add interactive hover effects with classes:

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight:hover {
      background-color: green;
      padding: 5px;
    }
  </style>
</head>
<body>
  <p class="highlight">Hover over this text to see the effect.</p>
</body>
</html>

When you hover over the paragraph, its background color and padding change.

Integrating JavaScript with Classes

JavaScript can easily select and modify elements by class. For example, you can use document.getElementsByClassName() to select elements with a specific class:

<!DOCTYPE html>
<html>
<head>
  <script>
    function updateStyle() {
      let elements = document.getElementsByClassName("highlight");
      for (let i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor = "green";
        elements[i].style.padding = "5px";
      }
    }
  </script>
</head>
<body>
  <p class="highlight">This is a highlighted paragraph.</p>
  <button onclick="updateStyle()">Apply Styles</button>
</body>
</html>

This example changes styles dynamically when the button is clicked.

Multiple and Combined Classes

An element can have multiple classes by separating each with a space. This provides fine control over styling:

<h2 class="title bold italic underline">Combined Styling Example</h2>

When you apply multiple classes, the styles merge according to CSS rules. This lets you build reusable style components and combine them as needed.

Common Pitfalls

Keep these in mind when using the class attribute:

Do not begin a class name with a digit.
Avoid reserved or ambiguous names that may conflict.
Maintain consistent naming (e.g., use hyphens or underscores).
Do not overuse generic class names to prevent CSS conflicts.

Advanced Use Cases

As you gain confidence with classes, you can use them in advanced scenarios:

Responsive design – Use media queries or JavaScript to adjust styles based on screen size.
Dynamic toggling – Add or remove classes with JavaScript to change layout or behavior.
Reusable components – Modern frameworks like React, Angular, and Vue rely on classes for modular components.

Supported Browsers

The HTML class attribute is supported by all modern browsers, including:

Google Chrome
Microsoft Edge
Mozilla Firefox
Apple Safari
Opera

This wide support makes the class attribute a reliable choice.

FAQs on HTML Class Attribute

What is the difference between class and ID attributes?

The class attribute applies to multiple elements for shared styling, while the ID attribute must be unique within a page and is used to identify a single element.

Are class names case sensitive?

Yes, class names in HTML and CSS are case sensitive. For example, .highlight and .Highlight are treated differently.

Can I use the class attribute on any HTML element?

Yes, the class attribute is global. You can add it to any HTML element to control styling or behavior.

How do I check if an element has a specific class in JavaScript?

You can use element.classList.contains("classname") to verify if an element has a particular class.

Previous Next