ID and Class in HTML


What is Id in HTML?

  • Id in HTML is used to specify a unique HTML element.

  • We cannot add the same 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:

  • Id is used to target the specific HTML element in stylesheets.

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


Syntax to add Id in HTML element

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

What is class in HTML?

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

  • We can add the same class to multiple HTML elements.

  • One HTML element can contain 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, HTML elements are accessed using a (.) dot.


Syntax to add class in HTML element

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

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.

Code Described in the video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID and Classes in HTML</title>
    <style>
        #heading {
            color: red;
        }
        /* .list {
            color: purple;
        } */
        .one {
            color: rgb(26, 11, 235);
        }
    </style>
</head>
<body>
    <h1 id="heading"> This is heading </h1>
    <h1> This is another heading </h1>
    <li class="list one">This is first list </li>
    <li class="list">This is second list </li>
    <li class="list">This is third list </li>
    <li class="list one">This is fourth list </li>
</body>
</html>


Post a Comment

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

Top Post Ad

Below Post Ad