In this article, we will learn about what is HTML id attribute, difference between html class and html id, HTML bookmarks with id and links, how to use html id attribute in JavaScript along with their implementation through examples.
HTML id Attribute
The HTML id attribute defines a unique id for an HTML element. It acts as a unique identifier which is used by the CSS and the JavaScript for performing certain tasks and you can't use more than one element with the same id in an HTML document.
Syntax
<tag id=""></tag>
Now let's understand html id attribute with the help of following example;
<!DOCTYPE html><html>
<head>
<style>
#foobar{
color: green;
}
</style>
</head>
<body>
<h2>Welcome to Html id attribute tutorial</h2>
<h1 id="foobar">Hey Folks!</h1>
</body>
</html>
Output
Difference between html class and html id attribute
The class attribute can be used by multiple HTML elements but the id attribute is used by only one HTML element within the page.
Let's illustrate the difference between html class and html id attribute;
<!DOCTYPE html><html>
<head>
<style>
/* Style the element with the id "header" */
#header{
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "country" */
.country {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Difference Between html Class and html ID</h2>
<p>The class attribute can be used by multiple HTML elements but the id attribute is used by only one HTML element within the page:</p>
<!-- An element with a unique id -->
<h1 id="header">List of country names</h1>
<!-- Multiple elements with same class -->
<h2 class="country">USA</h2>
<p>USA is the third most populous country in the world.</p>
<h2 class="country">Russia</h2>
<p>Russia is the world's largest nation.</p>
<h2 class="country">India</h2>
<p>India is the seventh-largest country by area.</p>
</body>
</html>
Output
Create HTML Bookmarks with ID and Links
Bookmark came in handy when the web pages are very long. In order to create a Bookmark link html we just have to create a Bookmark and then we have to add a link to that bookmark. So, whenever you will click the link then you will reach the location with the bookmark.
1. First of all, use the id attribute to create a bookmark:
<h2 id="L4">Line 4</h2>
2. Then, add a link to the bookmark ("Jump to line 4"), from within the same page
<!DOCTYPE html><html>
<body>
<p><a href="#L4">Jump to Line 4</a></p>
<h2>Line 1</h2>
<p>This line explains ba bla bla</p>
<h2>Line 2</h2>
<p>This line explains ba bla bla</p>
<h2>Line 3</h2>
<p>This line explains ba bla bla</p>
<h2 id="L4">Line 4</h2>
<p>This line explains ba bla bla</p>
<h2>Line 5</h2>
<p>This line explains ba bla bla</p>
</body>
</html>
Output
Using HTML id Attribute in JavaScript
JavaScript can also use id names to perform certain functions for specific elements. We can access javascript elements using getElementById() method with unique id name.
Let's understand html id attribute in JavaScript with the help of following example;
<!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="header">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("header").innerHTML = "Welcome to Answersjet!";
}
</script>
</body>
</html>
Output
Conclusion
Above we have discussed about what is HTML id attribute, difference between html class and html id, HTML bookmarks with id and links, how to use html id attribute in JavaScript along with their implementation through examples. The HTML id attribute defines a unique id for an HTML element. It acts as a unique identifier which is used by the CSS and the JavaScript for performing certain tasks.