HTML Class Attribute - Web4learners

The HTML class attribute is used to assign one or more class names to an HTML element. Developers commonly use it to apply CSS styles to multiple elements, organize page layouts, and select elements with JavaScript. The class attribute is an important part of building consistent, maintainable, and responsive websites.

What Is the HTML Class Attribute?

The class attribute identifies elements that belong to the same group. Multiple HTML elements can share the same class name, allowing developers to apply the same styles or behavior to them.

For example, you can assign the highlight class to several paragraphs and give them all the same background color using CSS.

To understand the basics, explore HTML Attributes and HTML Global Attributes.

HTML Class Attribute Example

The following example demonstrates how to use the class attribute.

<p class="highlight">Learn HTML basics.</p>

<p class="highlight">Learn CSS styling.</p>

<p class="highlight">Learn JavaScript.</p>

All three paragraphs use the same highlight class. You can style them together using CSS instead of writing separate styles for each paragraph.

Using the Class Attribute with CSS

CSS uses a period (.) before a class name to select elements that have that class.

<style>
  .highlight {
    color: #0056b3;
    background-color: #eaf3ff;
    padding: 10px;
    border-radius: 6px;
  }
</style>

<p class="highlight">Welcome to Web4Learners.</p>

<p class="highlight">Explore our HTML tutorials.</p>

The .highlight selector applies the same text color, background, padding, and rounded corners to both paragraphs.

You can also use classes to create reusable button styles, cards, navigation links, and content sections.

Learn more about CSS Classes with HTML and HTML Style Attribute.

Using Multiple Classes on One Element

An HTML element can have multiple class names. Separate the names with spaces inside the class attribute.

<style>
  .button {
    padding: 10px 16px;
    border-radius: 6px;
  }

  .primary {
    background-color: #007bff;
    color: white;
  }
</style>

<button class="button primary">Get Started</button>

Here, the button uses both button and primary. The first class controls its spacing and shape, while the second defines its colors.

This approach helps developers reuse CSS rules across different elements.

Using the Class Attribute with JavaScript

JavaScript can select elements by their class names and modify their content or appearance.

<p class="message">Welcome to Web4Learners!</p>

<button type="button" onclick="changeMessage()">
  Change Message
</button>

<script>
  function changeMessage() {
    document.querySelector(".message").textContent =
      "Start learning HTML today!";
  }
</script>

The querySelector() method selects the first element matching .message. JavaScript then changes its text when the button is clicked.

To work with multiple matching elements, developers can use querySelectorAll().

Class Attribute vs ID Attribute

The class and id attributes both identify HTML elements, but they serve different purposes.

Class attribute	ID attribute
Can be shared by multiple elements	Should be unique within a document
Selected in CSS using `.`	Selected in CSS using `#`
Useful for reusable styles	Useful for identifying a specific element
An element can have multiple classes	An element should have only one ID value

For example, use a class to style several tutorial cards and an ID to identify a particular section of a page.

Frequently Asked Questions

Can multiple HTML elements use the same class?

Yes. Multiple elements can share the same class name and receive the same CSS styles or JavaScript behavior.

Can one HTML element have multiple classes?

Yes. Separate class names with spaces, such as class="card featured".

Is the class attribute case-sensitive?

Class names are matched according to CSS selector rules, which are generally case-sensitive. It is best to use consistent capitalization.

Does the class attribute work without CSS?

Yes. A class can be used by JavaScript or other tools even when no CSS rule is associated with it.