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>
