Open In App

HTML Class Attribute

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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. 

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.

HTML




<!DOCTYPE html>
<html>
<style>
    .country {
        color: white;
        padding: 10px;
    }
    .china {
        background-color: black;
    }
    .india {
        background-color: blue;
    }
    .usa {
        background-color: red;
    }
    center {
        padding: 20px;
    }
</style>
 
<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:

classAttributeMultipleClassName

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 : 



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads