Open In App

Difference between id and class Attributes in HTML

Improve
Improve
Like Article
Like
Save
Share
Report

In HTML, the “id” attribute is employed to uniquely identify a specific element on a page. On the other hand, the “class” attribute is utilized to categorize and apply styles or scripts to multiple elements, enabling the application of common styles to various parts of the page where the class is assigned.

HTML id Attribute

The id attribute is a unique identifier that is used to specify the document. It is used by CSS and JavaScript to perform a certain task for a unique element. In CSS, the id attribute is written using the # symbol followed by id.

Syntax

<element id="id_name">

In CSS Stylesheet:
#id_name {
    // CSS Property
}

Example: In this example, we demonstrates the use of the id attribute to style and identify elements. The paragraph with id “geeks” is styled with green color and increased font size.

html




<!DOCTYPE html>
<html>
    <head>
        <title>HTML id attribute</title>
 
        <style>
            #geeks {
                color: green;
                font-size: 25px;
            }
        </style>
    </head>
 
    <body style="text-align: center">
        <h1>
            Geeks for Geeks
        </h1>
        <p id="geeks">
            Welcome to Geeks for Geeks
        </p>
        <p>
            A Computer Science portal for geeks
        </p>
    </body>
</html>


Output:

HTML class Attribute

The class attribute is used to specify one or more class names for an HTML element. The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. The class name in CSS stylesheet using “.” symbol.

Syntax

<element class="class_name">

In CSS Stylesheet:
.class {
    // CSS Property
}

Example: In this example, we use a class selector to style the paragraph with green color and increased font size, aligning content to the center.

html




<!DOCTYPE html>
<html>
    <head>
        <style>
            .geeks {
                color: green;
                font-size: 25px;
            }
        </style>
    </head>
 
    <body style="text-align: center">
        <h1>Geeks for Geeks</h1>
        <p>Welcome to Geeks for Geeks</p>
        <p class="geeks">
            A Computer Science portal for geeks
        </p>
    </body>
</html>


Output: 
 

Difference Table between id and class attribute

The only difference between them is that “id” is unique in a page and can only apply to at most one element, while “class” selector can apply to multiple elements. 

ID Attribute Class Attribute
Uniquely identifies one element. Can be applied to multiple elements.
Primarily used for styling or JavaScript. Also used for styling or JavaScript.
Only one element can have a specific ID. Multiple elements can share the same class.
Written as id="example". Written as class="example".
Accessed in CSS with #example selector. Accessed in CSS with .example selector.
Often used for unique page elements. Commonly used for styling groups of elements.

HTML is the foundation of webpages is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.



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