HTML Class Attribute

The HTML class attribute is used to assign one or more CSS classes to an HTML element. Classes define styling rules, allowing elements with the same class to share visual properties defined in CSS.

HTML class attribute Supported Tags: It supports all HTML elements.

Syntax

<tag class="classname" />

Examples of HTML Class Attribute

Here is a basic example of an HTML Class Attribute

Using the same HTML class attribute in different tags

The HTML class attribute can be applied to various tags, allowing multiple elements to share a common classification. This enables consistent styling or functionality across different types of elements, enhancing design cohesion and simplifying maintenance.

Example: This example shows the use of the classes in HTML. 

<!DOCTYPE html>
<html>

<head>
    <style>
        .country {
            background-color: black;
            color: white;
            padding: 8px;
        }
    </style>
</head>

<body>
    <h2 class="country">CHINA</h2>

    <p>
        China has the largest population
        in the world.
    </p>

    <h2 class="country">INDIA</h2>

    <p>
        India has the second largest
        population in the world.
    </p>

    <h2 class="country">UNITED STATES</h2>

    <p>
        United States has the third largest
        population in the world.
    </p>
</body>

</html>

Output:

Explanation

• In the above example each heading (<h2>) is assigned the class “country” using the class attribute.
• The CSS selector .country targets multiple elements with the class “country” to apply styling.
• Styling defined for the “country” class is applied uniformly to all headings tagged with it.
• Using class attributes ensures consistent styling across headings, simplifying design management.

Using multiple HTML class attribute

The HTML class attribute in HTML allows multiple classes to be applied to an element, separated by spaces. This enables styling and behavior to be defined and shared across multiple elements.

Example: In this example, we will use more than one class.

<!DOCTYPE html>
<html>

<head>
    <style>
        .country {
            color: white;
            padding: 10px;
        }

        .china {
            background-color: black;
        }

        .india {
            background-color: blue;
        }

        .usa {
            background-color: red;
        }

        center {
            padding: 20px;
        }
    </style>
</head>


<body>
    <center>
        <h2 class="country china">CHINA</h2>
        <h2 class="country india">INDIA</h2>
        <h2 class="country usa">UNITED STATES</h2>
    </center>
</body>

</html>

Output:

HTML class attribute multiple classes

Explanation:

• In the above example <h2> elements are assigned the “country” class for shared styling attributes.
• Additional classes like “china”, “india”, and “usa” provide unique background colors.
• Classes set background colors to black, blue, and red, with white text and padding for visual contrast.
• The <center> tag ensures horizontal alignment of content, improving the presentation and readability of the page.

HTML Class Attribute Use Cases

1.What is use of class attribute in HTML?

The class attribute in HTML assigns elements to groups, enabling targeted styling or functionality application via CSS or JavaScript.

2. When to use the class attribute and the id attribute ?

Use class for multiple elements with shared characteristics; use id for unique identification or targeting specific elements individually.

Supported Browser: The browser supported by Class attribute are listed below : 

• Chrome 15 above
• Edge 12 and above
• Firefox 1 and above
• Opera 14 and above
• Safari 6 and above

HTML Class Attribute – FAQs

Can an HTML element have multiple class names?

Yes, an element can have multiple class names. Just separate each class name with a space, like this: <div class=”class1 class2″>.

Can I use the class attribute with JavaScript?

Yes, the class attribute can be used with JavaScript to manipulate elements, for example, by using document.getElementsByClassName('classname') or document.querySelectorAll('.classname') to select elements with a specific class.

How do I add or remove a class from an element using JavaScript?

You can add or remove a class using JavaScript with the classList property, like this: element.classList.add('newClass') or element.classList.remove('oldClass').

Is the class attribute case-sensitive?

No, the class attribute itself is not case-sensitive, but CSS class names are case-sensitive, so you should use consistent capitalization.

Can I use the class attribute on any HTML element?

Yes, the class attribute can be applied to any HTML element, allowing for consistent styling or behavior across different parts of a webpage.

S

Shubrodeep Banerjee

Follow

Improve