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.