HTML Class Attribute with Examples

The class attribute in HTML is used to assign one or more class names to an element. A class acts like a label or identifier that helps you apply CSS styles or JavaScript to specific parts of your webpage.

In simple words,

class is a way to group similar elements together and style or control them all at once.

Syntax

<tagname class="classname">Content</tagname>

💡 Tip: You can assign multiple classes to the same element by separating them with spaces.

Example:

<div class="container main-section"></div>

Here, the element belongs to both container and main-section classes.

Example of Basic Use of Class Attribute

<!DOCTYPE html>
<html>
<head>
  <title>HTML class Attribute Example</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>

<h2 class="highlight">This heading has a yellow background</h2>
<p>This paragraph has no class applied.</p>

</body>
</html>

The .highlight in CSS selects all elements with that class name. You can use the same class on multiple elements to apply the same style repeatedly.

Applying One Class to Multiple Elements

You can use the same class name across several elements to apply identical styles.

<!DOCTYPE html>
<html>
<head>
  <title>Multiple Elements with Same Class</title>
  <style>
    .box {
      background-color: lightblue;
      border: 1px solid black;
      padding: 10px;
      margin: 5px;
    }
  </style>
</head>
<body>

<h2>Using Same Class for Multiple Elements</h2>

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

</body>
</html>

💡 Tip: Using the same class helps you style multiple sections without repeating CSS.

Multiple Classes on a Single Element

You can apply multiple class names to one element for combining styles.

<!DOCTYPE html>
<html>
<head>
  <title>Multiple Classes Example</title>
  <style>
    .box {
      border: 1px solid black;
      padding: 10px;
    }
    .rounded {
      border-radius: 10px;
    }
    .shadow {
      box-shadow: 2px 2px 8px gray;
    }
  </style>
</head>
<body>

<div class="box rounded shadow">
  This element uses multiple classes together.
</div>

</body>
</html>

The element inherits all properties from .box, .rounded, and .shadow.

Using Class with Different HTML Tags

A class can be applied to any HTML tag headings, paragraphs, spans, or even images.

<!DOCTYPE html>
<html>
<head>
  <title>Class with Different Elements</title>
  <style>
    .highlight {
      background-color: green;
      color: white;
      padding: 4px;
    }
  </style>
</head>
<body>

<h2 class="highlight">HTML</h2>
<p class="highlight">CSS</p>
<span class="highlight">JavaScript</span>

</body>
</html>

💡 Note: Classes help maintain consistency in design across multiple elements.

Class Attribute with JavaScript

The class attribute can also be accessed using JavaScript to dynamically modify styles or behaviors.

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Class Example</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>

<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
<p class="text">Paragraph 3</p>

<button onclick="highlightAll()">Highlight All</button>

<script>
function highlightAll() {
  let items = document.getElementsByClassName("text");
  for (let i = 0; i < items.length; i++) {
    items[i].classList.add("highlight");
  }
}
</script>

</body>
</html>

getElementsByClassName() selects all elements with the text class, and classList.add(“highlight”) adds a new class to them dynamically.

Real-Life Example of Web Layout Using Class

<!DOCTYPE html>
<html>
<head>
  <title>Website Layout using Class</title>
  <style>
    .header {
      background-color: #4CAF50;
      color: white;
      text-align: center;
      padding: 15px;
    }
    .menu {
      float: left;
      width: 25%;
      background-color: #f2f2f2;
      padding: 10px;
    }
    .content {
      float: right;
      width: 70%;
      padding: 10px;
    }
    .footer {
      clear: both;
      background-color: #ddd;
      text-align: center;
      padding: 10px;
    }
  </style>
</head>
<body>

<div class="header">
  <h2>My Website</h2>
</div>

<div class="menu">
  <h3>Menu</h3>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>

<div class="content">
  <h3>Welcome!</h3>
  <p>This is a webpage layout created using the class attribute.</p>
</div>

<div class="footer">
  © 2025 My Website
</div>

</body>
</html>

This is how most modern web layouts are structured with divs and class attributes defining the page sections.

HTML div Element HTML id Attribute