Introduction
In this chapter, you will learn about the HTML id attribute, which is used to define a unique identifier for an HTML element.
What is the id Attribute?
The id attribute specifies a unique identifier for an HTML element. Each id must be unique within a document, meaning that no two elements can have the same id value.
Syntax
<element id="unique-id">Content goes here.</element>
Using the id Attribute with CSS
You can use the id attribute to apply specific CSS styles to an element. In CSS, the id selector is prefixed with a hash (#).
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID Attribute Example</title>
<style>
#header {
background-color: #f4f4f4;
padding: 20px;
text-align: center;
}
#main {
margin: 20px;
padding: 20px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="header">
<h1>Welcome to My Website</h1>
</div>
<div id="main">
<p>This is the main content area.</p>
</div>
</body>
</html>
Using the id Attribute with JavaScript
The id attribute is commonly used in JavaScript to manipulate specific elements.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID Attribute Example</title>
<style>
#highlight {
background-color: yellow;
}
</style>
<script>
function changeColor() {
var element = document.getElementById('highlight');
element.style.color = 'blue';
}
</script>
</head>
<body>
<p id="highlight">This text will be highlighted and change color.</p>
<button onclick="changeColor()">Change Color</button>
</body>
</html>
Linking to a Specific Section of a Page
You can use the id attribute to create anchor links that jump to specific sections of a page.
Example
HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anchor Links Example</title>
</head>
<body>
<nav>
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
</nav>
<div id="section1">
<h2>Section 1</h2>
<p>This is the first section.</p>
</div>
<div id="section2">
<h2>Section 2</h2>
<p>This is the second section.</p>
</div>
<div id="section3">
<h2>Section 3</h2>
<p>This is the third section.</p>
</div>
</body>
</html>
Real-World Use Case: Form Handling
The id attribute is essential for associating labels with form inputs and for handling form data with JavaScript.
Example
HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Handling Example</title>
<style>
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
padding: 8px;
width: 100%;
box-sizing: border-box;
}
</style>
<script>
function submitForm() {
var firstName = document.getElementById('first-name').value;
var lastName = document.getElementById('last-name').value;
alert('Submitted: ' + firstName + ' ' + lastName);
}
</script>
</head>
<body>
<h1>Form Handling</h1>
<div class="form-group">
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="first-name">
</div>
<div class="form-group">
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="last-name">
</div>
<button onclick="submitForm()">Submit</button>
</body>
</html>
Conclusion
The HTML id attribute is used for uniquely identifying elements on a web page. It is widely used in CSS for applying specific styles, in JavaScript for manipulating elements, and for creating anchor links within a page. Understanding how to use the id attribute effectively is essential for web development, enabling precise control and interaction with individual elements.