HTML classes allow developers to assign the same name to one or more HTML elements. They are commonly used to apply CSS styles to multiple elements and select elements using JavaScript.

The class attribute helps organize webpage content and maintain consistent designs. For example, you can use the same class to give multiple headings a blue color or apply the same style to several buttons.

What Is an HTML Class?

An HTML class is a name assigned to an element using the class attribute. CSS can use this name to style elements, while JavaScript can use it to select and manipulate them.

Here is the basic syntax:

<p class="message">Welcome to HTML.</p>

In this example, message is the class name assigned to the paragraph. You can learn how HTML organizes webpage content in HTML page layout.

HTML Class Example

The following example demonstrates how to use a class to style multiple elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Classes</title>

    <style>
        .highlight {
            color: blue;
            background-color: lightyellow;
            padding: 10px;
        }
    </style>
</head>
<body>

    <h1 class="highlight">Welcome to HTML</h1>

    <p class="highlight">
        Learn HTML step by step.
    </p>

    <p>
        This paragraph uses the default style.
    </p>

</body>
</html>

In this example, both the heading and the first paragraph use the highlight class. The CSS selector .highlight applies the same color, background, and padding to both elements.

Notice that the CSS class selector starts with a dot (.), followed by the class name.

Using Classes with Different HTML Elements

You can assign the same class to different types of HTML elements. For example, a class can be used with headings, paragraphs, buttons, and links.

<h2 class="important">Important Topic</h2>
<p class="important">Read this information carefully.</p>
<button class="important">Learn More</button>

A single CSS rule can style all these elements. This makes it easier to maintain a consistent design across your website.

HTML Class Naming Rules

Follow these guidelines when creating class names:

• Use meaningful names such as highlight, card, or main-content.
• Class names are case-sensitive, so highlight and Highlight are different names.
• Use hyphens to separate words when appropriate.
• Avoid spaces when naming a single class.
• Use the same class on multiple elements when they need shared styling.

For example, class="main-content" defines one class, while class="main content" assigns two separate classes.

HTML Class vs ID

A class can be reused across multiple elements, while an ID identifies a specific element and should be unique within the document.

Class	ID
Uses the class attribute	Uses the id attribute
Can be reused on multiple elements	Should be unique per document
CSS selector starts with .	CSS selector starts with #

Learn more about HTML IDs and Class vs ID to understand when to use each attribute.

Frequently Asked Questions

Can multiple HTML elements have the same class?

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

Can an HTML element have multiple classes?

Yes. You can assign multiple class names to one element, separated by spaces. Learn more in Using Multiple Classes.

Can JavaScript select HTML classes?

Yes. JavaScript can use methods such as document.querySelectorAll() and document.getElementsByClassName() to select elements by class.

Are HTML classes required?

No. Classes are optional, but they are useful for styling, selecting, and organizing elements efficiently.