HTML id Attribute is the id global attribute creates a unique identifier (ID) for the whole document. Its job is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
The HTML id attribute is used to give each HTML element its own unique id.
In an HTML file, you can’t have more than one element with the same id.
How To Use The id Attribute
The id attribute of an HTML element gives it a unique id. The id attribute must have a value that is unique in the HTML document.
The id attribute tells a style sheet to look at a certain style declaration. It is also used by JavaScript to find the element with the given id and change it.
For id, you write a hash character (#), then the name of the id. Then, put the CSS properties inside of curly braces.
In the next example, we have a “h1” element that points to the “head” id name. The #head style definition in the head section will be used to style this <h1> element:
Example
<!DOCTYPE html>
<html>
<head>
<style>
#head {
background-color: yellow;
color: #000;
padding: 20px 40px;
text-align: center;
}
</style>
</head>
<body><h2>The id Attribute Example </h2>
<p>Use CSS to style an element with the id “head”:</p><h1 id=”head”>Header box </h1>
</body>
</html>
Output
Note that the case of the id name is important!
Note: The id name must have at least one character, it can’t start with a number, and it can’t have any blank spaces in it (spaces, tabs, etc.).
Difference Between Class and ID
A class name can be used by more than one HTML element on a page, but an id name can only be used by one HTML element:
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* using id here */
#head {
background-color: yellow;
color: #000;
padding: 20px 40px;
text-align: center;
}/* using classhere*/
.box {
background-color: blue;
color: white;
border: 3px solid orange;
margin: 20px;
padding: 20px;
border-radius:10px;
}</style>
</head>
<body><h2>Difference Between Class and ID</h2>
<p>A class name can be used by more than one HTML element on a page, but an id name can only be used by one HTML element.</p><!– An element with a unique id –>
<h1 id=”head”>Header box</h1><!– Multiple elements with same class –>
<div class=”box”>
<h2>Box 1</h2>
<p>example of class</p>
</div><div class=”box”>
<h2>Box 2</h2>
<p>example of class</p>
</div></body>
</html>
Output
Bookmarks in HTML with an ID and a link
With an HTML bookmark, a reader can go straight to a certain part of a webpage.
If your page is long, bookmarks can help.
You have to make a bookmark and add a link to it before you can use it.
When the link is clicked, the page will move to where the bookmark is.
Example
First, add an id attribute to a bookmark:
<h2 id=”head1″>Header 1</h2>
Then, add a link to the bookmark (“Jump to header 1), from within the same page:
Example
<a href=”#head1”>Jump to header 1</a>
JavaScript and the id attribute
JavaScript can also use the id attribute to do certain things for that element.
With the getElementById() method, JavaScript can get to an element by its id:
Example
<!DOCTYPE html>
<html>
<body><h2>Using The id Attribute in JavaScript</h2>
<p>The getElementById() function allows JavaScript to retrieve an element by its ID.</p><h1 id=”head”>Header box</h1>
<button onclick=”changetext()”>Change text</button><script>
function changetext() {
document.getElementById(“head”).innerHTML = “Good morning India!”;
}
</script></body>
</html>
Output
Brief Synopsis of the Chapter
- An HTML element’s id can be specified using the id property, and its value must be unique within the HTML document.
- CSS and JavaScript rely on the id attribute to select and style individual elements.
- ID attribute values are case sensitive.
- In addition to being used for bookmarking in HTML, the id attribute has other uses.
- Using the getElementById() method, JavaScript may locate an element by its id.