The Id attribute specifies a unique Id of an HTML element (the value of the HTML document must be unique). The Id value can be used for certain tasks with the given Id values by CSS and JavaScript. For CSS, write a hatch (#) character, followed by the Id of the element to select an element with a particular Id:

Example:


<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: yellow;
color: black;
padding: 40px;
text-align: center;
} 
</style>
</head>
<body>
<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>
<h1 id="myHeader">My Header</h1>
</body>
</html>

Output:

The id Attribute

Use CSS to style an element with the id "myHeader":

My Header

Note: The identification (id) value is case-sensitive. At least one character must be in the Id value, and no whitespace (spaces, tablings, etc.).

An HTML element may only have one Id that belongs to that single element, whereas multiple elements can use a same class name:

Example:


<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: green;
color: white;
padding: 10px;
} 
</style>
</head>
<body>
<h2>Difference Between Class and ID</h2>
<p>Only one specific I d can be applied on an HTML page, whereas a class name can be applied to several items.</p>
<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple similar elements -->
<h2 class="city">Delhi</h2>
<p>Delhi is the capital of Bharat (India).</p>
<h2 class="city">Dehradun</h2>
<p>Dehradun is the capital of Uttarakhand.</p>
<h2 class="city">Garhwal and kumaon</h2>
<p>Garhwal and kumaon are the division of Uttarakhand.</p>
</body>
</html>

Output:

Difference Between Class and ID

Only one specific I d can be applied on an HTML page, whereas a class name can be applied to several items.

My Cities

Delhi

Delhi is the capital of Bharat (India).

Dehradun

Dehradun is the capital of Uttarakhand.

Garhwal and kumaon

Garhwal and kumaon are the division of Uttarakhand.

By using getElementById(), JavaScript can access an element with a specified Id:

Example:


<!DOCTYPE html>
<html>
<body>
<h2>Using The id Attribute in JavaScript</h2>
<p>With the getElementById()method, JavaScript can access an element with an Id (identified ):</p>
<h1 id="myHeader3">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("myHeader3").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>

Output:

Using The id Attribute in JavaScript

With the getElementById()method, JavaScript can access an element with an Id (identified ):

Hello World!

HTML bookmarks are used to make it possible for readers to jump into certain parts of the site. If our webpage is very long, bookmarks can be helpful for us. We must create a bookmark first and then add a link to it. to create the bookmark. The page scrolls to the bookmark when the link is clicked.

Example:


<!DOCTYPE html>
<html>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>

Output:

Jump to Chapter 4

Jump to Chapter 10