The HTML id attribute is used to indicate a unique id for an HTML element.

You can’t have more than one element with a similar id in an HTML document.

The id attribute is used to determine the unique ID for a element of the HTML document. It assigns the unique identifier which is used by the CSS and the JavaScript for playing out specific tasks.

In this tutorial, you will learn-

Using The id Attribute

The id attribute determines a unique id for an HTML element. The value of the id attribute should be unique inside the HTML document.

The id attribute is used to highlight a particular style declaration in a style sheet. It is additionally used by JavaScript to access and manipulate the element with the particular id.

The syntax for id is: write a hash character (#), followed by an id name. Then, at that point, define the CSS properties inside curly braces {}.

In the accompanying example we have an <h1> element that points to the id name “myHeader”. This <h1> element will be styled by the #myHeader style definition in the head segment:

Example

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

Note: The id name is case sensitive!
Note: The id name should contain at least one character, can’t begin with a number, and should not contain whitespaces (spaces, tabs, and so forth)

Difference Between Class and ID

A class name can be used by various HTML elements, while an id name should just be used by one HTML element inside the page:

Example

<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: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->
<h2 class="city">Islamabad</h2>
<p>Islamabad is the capital of Pakistan.</p>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

HTML Bookmarks with ID and Links

HTML bookmarks are used to allow readers to leap to specific pieces of a webpage.

Bookmarks can be helpful if your page is very long.

To use a bookmark, you should initially create it, and afterward add a link to it.

Then, at that point, when the link is clicked, the page will look to the area with the bookmark.

Example

First, create a bookmark with the id attribute:

<h2 id="C4">Chapter 4</h2>

Then, at that point, add a link to the bookmark (“Jump to Chapter 4”), from inside a similar page:

Example

<a href="#C4">Jump to Chapter 4</a>

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

Jump to Chapter 4

Jump to Chapter 10