Skip to content
Related Articles

Related Articles

Improve Article

Difference between an id and class in HTML?

  • Difficulty Level : Basic
  • Last Updated : 29 Jul, 2021

HTML id Attribute: The id attribute is a unique identifier which 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 # symbol followed by id.
Syntax: 
 

<element id="id_name">

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

Example: 
 

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: 
 

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 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. 
 

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :