Id attribute in HTML:
Id attribute in HTML:
It is the opposite of class attribute as in this id attribute is used in single element only. It is restricted to use the same id for many elements in HTML.
You can set the uniqueness with the help of the id attribute and the value also must be unique for that. It is also helpful to access a single element for JavaScript modulation.
Here in a class attribute, we are using dot operator, but in id attribute # symbol is used following with id name. Id name is case sensitive. The following example will illustrate more in the given below.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#mylife {
background-color: Blue;
color: Red;
padding: 40px;
</style>
</head>
<body>
<h1 id="mylife">Hello folks</h1>
</body>
</html>Id attribute in JavaScript:
If you want to perform a task in a single element then you must go with an id attribute.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>id with Javascript</h2>
<h1 id="mylife">Hello folks!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("mylife").innerHTML = "goodluck!";
}
</script>
</body>
</html>
Bookmark with Id
If you want to jump any section of the webpage then you must go with a bookmark.
Following the example to know more about it.
Example:
<!DOCTYPE html>
<html>
<body>
<p><a href="#C3">Jump to Chapter 4</a></p>
<p><a href="#C11">Jump to Chapter 10</a></p>
<h2>point 1</h2>
<p>Hello you are in point 3</p>
<h2>point 2</h2>
<p>Hello you are in point 3</p>
<h2 id="C3">point 3</h2>
<p>Hello you are in point 3</p>
<h2 id="C11">Chapter 11</h2>
<p>hello you are in point 11</p>
</body>
</html>