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

Chapter 1

This chapter explains ba bla bla

Chapter 2

This chapter explains ba bla bla

Chapter 3

This chapter explains ba bla bla

Chapter 4

This chapter explains ba bla bla

Chapter 5

This chapter explains ba bla bla

Chapter 6

This chapter explains ba bla bla

Chapter 7

This chapter explains ba bla bla

Chapter 8

This chapter explains ba bla bla

Chapter 9

This chapter explains ba bla bla

Chapter 10

This chapter explains ba bla bla

Chapter 11

This chapter explains ba bla bla

Chapter 12

This chapter explains ba bla bla

Chapter 13

This chapter explains ba bla bla

Chapter 14

This chapter explains ba bla bla

Chapter 15

This chapter explains ba bla bla

Chapter 16

This chapter explains ba bla bla

Chapter 17

This chapter explains ba bla bla

Chapter 18

This chapter explains ba bla bla

Chapter 19

This chapter explains ba bla bla

Chapter 20

This chapter explains ba bla bla

Chapter 21

This chapter explains ba bla bla

Chapter 22

This chapter explains ba bla bla

Chapter 23

This chapter explains ba bla bla

Or then again, add a link to the bookmark (“Jump to Chapter 4”), from another page:

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

Using The id Attribute in JavaScript

The id attribute can likewise be used by JavaScript to play out certain assignments for that particular element.

JavaScript can access an element with a particular id with the getElementById() method:

Example
Use the id attribute to manipulate text with JavaScript:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
<!DOCTYPE html>
<html>
<body>

<h2>Using The id Attribute in JavaScript</h2>
<p>JavaScript can access an element with a specified id by using the getElementById() method:</p>

<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

</body>
</html>

Using The id Attribute in JavaScript

JavaScript can access an element with a specified id by using the getElementById() method:

Hello World!


Chapter Summary

  • The id attribute is used to specify a unique id for an HTML element
  • The value of the id attribute must be unique within the HTML document
  • The id attribute is used by CSS and JavaScript to style/select a specific element
  • The value of the id attribute is case sensitive
  • The id attribute is also used to create HTML bookmarks
  • JavaScript can access an element with a specific id with the getElementById() method

HTML class Attribute

HTML Unordered Lists

HTML Ordered Lists

HTML Other Lists

HTML Block and Inline Elements


Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.