HTML id Attribute
The id attribute sets a unique id for an HTML element. You cannot have two elements with the same id in one document.
The id Attribute
The id attribute gives an element a unique id, which must be unique in the document. It points to a specific style in a style sheet, and JavaScript uses it to reach and change that element. To write the CSS, use a hash (#) followed by the id name, then the properties in curly braces.
Note: The id name is case sensitive. Note: It must have at least one character, cannot start with a number, and cannot contain spaces.
Example
An <h1> styled by its id.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>
Difference Between Class and ID
A class name can be used by many elements, but an id must be used by only one element on the page.
Example
A unique id alongside a shared class.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</head>
<body>
<h1 id="myHeader">My Cities</h1>
<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>
</body>
</html>
HTML Bookmarks with ID and Links
Bookmarks let readers jump to a specific part of a page, which is handy on a long page. First create the bookmark by giving an element an id, then add a link to it with href="#id". When the link is clicked, the page scrolls to that element. You can also link to a bookmark on another page by putting the file name before the #.
Example
A link that jumps to Chapter 4 on the same page.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bookmark Jump</title>
</head>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
Bookmark on another page
Linking to a bookmark on a different page.
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Using the id Attribute in JavaScript
JavaScript can use the id to work with that specific element. The getElementById() method finds the element with a given id.
Example
A button that changes a heading's text with JavaScript.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>
Chapter Summary
To recap: the id attribute sets a unique id for an element, and the value must be unique in the document. CSS and JavaScript use it to style or select a specific element, the value is case sensitive, and it is also used to make bookmarks. JavaScript can reach the element with getElementById().