What Is HTML id Attribute

The HTML id characteristic is utilized to determine a special id for a HTML component.

You can’t have more than one component with a similar id in a HTML record.

Utilizing The HTML id Attribute

The id characteristic determines a special id for a HTML component. The worth of the id characteristic should be interesting inside the HTML record.

The id characteristic is utilized to highlight a particular style assertion in a template. It is additionally utilized by JavaScript to get to and control the component with the particular id.

The grammar for id is: compose a hash character (#), trailed by an id name. Then, describe the CSS properties inside wavy backings {}.

In the accompanying model we have a component that focuses to the id name “myHeader”. This component 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 touchy!

Note: The id name should contain no less than one person, can’t begin with a number, and should not contain whitespaces (spaces, tabs, and so forth)

Difference Between Class and HTML id Attribute

A class name can be utilized by various HTML components, while an id name should just be utilized by one HTML component 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”>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>

Tip: You can learn much more about CSS in our CSS Tutorial.

HTML Bookmarks with HTML ID and Links

HTML bookmarks are utilized to permit perusers to leap to explicit pieces of a site page.

Bookmarks can be valuable if your page is extremely long.

To utilize a bookmark, you should initially make it, and afterward add a connection to it.

Then, at that point, when the connection 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, add a link to the bookmark (“Jump to Chapter 4”), from within the same page:

Example

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

Or, 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 property can likewise be utilized by JavaScript to play out certain undertakings for that particular component.

JavaScript can get to a component with a particular id with the getElementById() technique:

Example

Use the id attribute to manipulate text with JavaScript:<script>
function displayResult() {
  document.getElementById(“myHeader”).innerHTML = “Have a nice day!”;
}
</script>