HTML class Attribute

Introduction

The class attribute in HTML is a fundamental feature that allows developers to assign one or more class names to HTML elements. These class names, defined in CSS or referenced from external stylesheets, enable styling and help JavaScript select groups of elements for behavior and interactivity.

What You’ll Learn

Purpose of class

The primary purpose of the class attribute is to provide a way to select and style multiple elements with common characteristics. By assigning a class name to an element, you can apply predefined styles or scripts to a group of elements, promoting consistency and maintainability in your HTML documents.

📝 Syntax

Add class with one or more space-separated class names:

<p class="important-text">This paragraph has an important style.</p>

<button class="btn btn-primary">Save</button>

Syntax Rules

• Global attribute—valid on virtually every HTML element.
• Multiple classes are separated by spaces, not commas.
• Class names should start with a letter; use letters, digits, hyphens, and underscores.
• CSS targets classes with a dot: .important-text { }.
• Do not confuse with the unrelated legacy classid attribute.

💎 Values

The class attribute accepts one or more space-separated class names. These names are defined in your CSS or linked from external stylesheets. Here is a basic example:

<p class="important-text">This paragraph has an important style.</p>

In this example, the class attribute assigns the important-text class to the paragraph element, allowing you to style it using CSS with the selector .important-text.

Applicable Elements

Examples Gallery

CSS styling with multiple classes and dynamic classList.add in JavaScript.

<style>
  .important-text {
    font-weight: bold;
    color: red;
  }
  .highlight-background {
    background-color: yellow;
  }
</style>

<h1 class="important-text">Welcome to our Website!</h1>
<p class="important-text">This paragraph has an important style.</p>
<div class="highlight-background">
  <p>This div has a highlighted background.</p>
</div>

<p id="dynamicElement">This text will get a new style dynamically.</p>

<script>
  // Dynamically add a class to an element
  document.getElementById("dynamicElement").classList.add("dynamic-style");
</script>

♿ Accessibility

• Classes are not semantic — Do not rely on class names alone for meaning; use proper HTML elements and ARIA when needed.
• State classes — Pair visual classes like is-open with appropriate ARIA attributes such as aria-expanded.
• Do not hide content with CSS only — Use accessible patterns when toggling visibility.
• Focus styles — Never remove focus outlines without providing an accessible alternative.
• Prefer semantic HTML — Use <button> instead of <div class="button"> when possible.

💡 Best Practices

• Use meaningful and descriptive class names to improve code readability and maintenance.
• Avoid excessive use of classes for styling; prefer using semantic HTML elements when applicable.
• Leverage the class attribute to group elements with similar behavior, making it easier to apply styles and scripts.