HTML id Attribute

HTML id The attribute is used to specify a unique id for HTML elements.

An HTML document cannot contain multiple elements with the same id.

Using the id attribute

id The attribute specifies the unique ID of an HTML element. id The value of the attribute must be unique in the HTML document.

id The attribute is used to point to a specific style declaration in the stylesheet. JavaScript can also use it to access and manipulate elements with a specific ID.

The syntax of 'id' is: write a hash (#) followed by an id name. Then, define CSS properties within the curly braces {}.

example below we have a <h1> pointing to the id name "myHeader". This <h1> elements will be based on the element in the head section #myHeader Style definitions are used for style settings:

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>

Try it yourself

Note:The case sensitivity of id names!

Note:An id must contain at least one character and cannot contain whitespace characters (spaces, tabs, etc.).

Difference between Class and ID

The same class name can be used by multiple HTML elements, while an id name can only be used by one HTML element on the page:

Example

<style>
/* Styles for the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* Styles for all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- Elements with a unique id -->
<h1 id="myHeader">My Cities</h1>
<!-- Elements with the same class name -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

Try it yourself

Tip:Please visit our CSS Tutorial to learn more CSS knowledge.

HTML bookmarks are implemented through ID and link

HTML bookmarks are used to allow readers to jump to a specific part of the web page.

Bookmarks may be very useful if the page is long.

To use a bookmark, you must first create it and then add a link to it.

Then, when the link is clicked, the page will scroll to the location with the bookmark.

Example

First, use}} id Attribute to create bookmarks:

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

Then, on the same page, add a link to this bookmark ("Jump to Chapter 4"):

Example

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

Try it yourself

Or, on another page, add a link to this bookmark ("Jump to Chapter 4"):

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

Using the id attribute in JavaScript

JavaScript can also use the id attribute to perform certain tasks for specific elements.

JavaScript can be used getElementById() Method to Access Elements with Specific ids:

Example

Use the id attribute to handle text with JavaScript:

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

Try it yourself

Tip:Please HTML JavaScript In this chapter, or our JavaScript Tutorial Learn JavaScript here.

Chapter Summary

  • id Attribute to specify a unique id for HTML elements
  • id The value of the attribute must be unique in the HTML document
  • CSS and JavaScript can be used id Attribute to select elements or set styles for specific elements
  • id The value of the attribute is case-sensitive
  • id The attribute can also be used to create HTML bookmarks
  • JavaScript can be used getElementById() Method to Access Elements with Specific ids