The id attribute in HTML is used to assign a unique identifier to an element on a webpage.
Each id value must be unique meaning it can only be used once in a document.
You can think of it as a name tag for a specific element that lets CSS and JavaScript find or modify that element easily.
💡 Use case:
- To style a unique element with CSS
- To create links to a specific section
- To manipulate elements with JavaScript
Syntax
<tagname id="uniqueID">Content</tagname>Note:
- The id name cannot contain spaces.
- It is case-sensitive in JavaScript.
Example of Basic Use of id Attribute
<!DOCTYPE html>
<html>
<head>
<title>HTML id Attribute Example</title>
<style>
#intro {
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<h2 id="intro">Welcome to HTML id Attribute Tutorial</h2>
<p>This heading has a unique id called "intro".</p>
</body>
</html>💡 Explanation: In CSS, an element with an id is targeted using a # before the id name.
Using id Attribute for CSS Styling
The id attribute allows you to style one specific element differently from others.
Example:
<!DOCTYPE html>
<html>
<head>
<title>id for Styling</title>
<style>
#main-title {
color: white;
background-color: #4CAF50;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="main-title">This is a Unique Title</h1>
<p>This paragraph is not affected.</p>
</body>
</html>Tip: Use ids for unique sections like header, footer, navbar, or main title.
id Attribute with JavaScript
You can use the id attribute to access and change elements dynamically using JavaScript.
Example:
<!DOCTYPE html>
<html>
<head>
<title>id with JavaScript</title>
</head>
<body>
<h2 id="heading">Hello World!</h2>
<button onclick="changeText()">Click Me</button>
<script>
function changeText() {
document.getElementById("heading").innerHTML = "You clicked the button!";
}
</script>
</body>
</html>Explanation: document.getElementById(“heading”) selects the element with that id and modifies its content.
id Attribute for Page Navigation (Anchor Links)
The id attribute can be used to jump directly to a specific section of a webpage.
Example:
<!DOCTYPE html>
<html>
<head>
<title>id for Navigation</title>
</head>
<body>
<a href="#section2">Go to Section 2</a>
<h2 id="section1">Section 1</h2>
<p>This is the first section.</p>
<h2 id="section2">Section 2</h2>
<p>This is the second section with an id “section2”.</p>
</body>
</html>💡 Use Case: Perfect for creating table of contents, FAQ pages, or one-page websites.
HTML id in Forms
The id attribute is also used to connect <label> tags with form inputs.
Example:
<!DOCTYPE html>
<html>
<head>
<title>id in HTML Forms</title>
</head>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</form>
</body>
</html>Explanation: The for attribute of <label> connects directly with the id of <input>.
Full Example: id for Layout and Styling
<!DOCTYPE html>
<html>
<head>
<title>HTML id Example</title>
<style>
#header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 15px;
}
#content {
background-color: #f9f9f9;
padding: 15px;
}
#footer {
background-color: #ddd;
text-align: center;
padding: 10px;
margin-top: 15px;
}
</style>
</head>
<body>
<div id="header">
<h2>Website Header</h2>
</div>
<div id="content">
<h3>About Page</h3>
<p>This content section is uniquely identified by “content” id.</p>
</div>
<div id="footer">
<p>Website Footer © 2025</p>
</div>
</body>
</html>Each section is styled independently using unique ids.