id and class in HTML


Id in HTML

  • It is used to specify a unique id for an HTML element.

  • We cannot add a single id to multiple HTML elements.

  • Id for an HTML element will be unique in the entire HTML document.

  • It is specified using the id attribute in the HTML element.


Use of Id:

  • In stylesheet, it is used to target the specific HTML element.

  • In javascript, it is used to access the element.

  • Id can be used to jump on the specific section on our Webpage.

  • In CSS element with id is accessed using (#) hash.


Example:

<!DOCTYPE html>
<html>
<head>
    <title> Id in HTML - HTML Simplified Series </title>
</head>
<style>
    #webID {
        color: orangered;
    }
</style>
<body>

    <h1 id="webID"> Geeks Help</h1>

</body>
</html>

Output:





Class in HTML

  • Class is used to target the multiple elements from the HTML document.

  • We can add the same class to multiple elements.

  • One element can have one or more than one class.

  • Class is specified using a class attribute in the HTML element.


Use of class:

  • It is used when we want to add the same style on multiple elements with CSS.

  • Also, in JavaScript classes are used to access multiple elements.

  • In CSS elements with class are accessed using a (.) dot.


Example:

<!DOCTYPE html>
<html>
<head>
    <title> Class in HTML - HTML Simplified Series </title>
</head>
<style>
    .myPara {
        color: green;
    }
</style>
<body>

    <p class="myPara"> This is first paragraph </p>
    <p class="myPara"> This is second paragraph </p>

</body>
</html>

Output:



Difference Between id and class in HTML

ID

Class

id is used to specify a unique id for an HTML element. class is used to target the multiple elements from the HTML document.
We cannot add a single id to multiple HTML elements. We can add the same class to multiple elements.
id for an HTML element will be unique in the entire HTML document. The class can be the same on multiple elements and a single element can have more than one class.
id is specified using the id attribute in the HTML element. class is specified using the class attribute in the HTML element.
In CSS element is accessed using (#) hash. In CSS elements with class are accessed using a (.) dot.


id and class in HTML


Tags
Raju Sheoran

Raju Sheoran

Hi!, I'm the Founder and Developer of Geeks Help we provide the best Computer or Programming Related Content With Notes PDF, Amazing Designs, Easy to Readable for Learners. linkedin instagram facebook

Post a Comment

2 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad