Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Does ID have to be unique in the whole HTML page?
Yes, ID attributes must be unique throughout the entire HTML document. According to the official HTML specification, each ID value can appear only once per page. This uniqueness requirement ensures proper functionality for CSS styling, JavaScript manipulation, and anchor linking.
Why ID Uniqueness Matters
The uniqueness of IDs is critical for several reasons
CSS Targeting The
#selector in CSS expects to target exactly one element. Multiple elements with the same ID can cause styling conflicts.JavaScript Selection Methods like
getElementById()return only the first matching element, ignoring duplicates.Anchor Navigation Browser navigation to
#sectionIdworks correctly only when the ID is unique.Accessibility Screen readers and other assistive technologies rely on unique IDs for proper element identification.
Syntax
Following is the syntax for using unique ID attributes
<element id="uniqueIdentifier">Content</element>
Each uniqueIdentifier must appear only once in the entire HTML document.
Using Unique IDs for Styling
Example
Following example demonstrates proper usage of unique ID attributes for CSS styling
<!DOCTYPE html>
<html>
<head>
<title>Unique ID Example</title>
<style>
#myHeader {
border: 2px solid yellow;
background-color: orange;
padding: 50px;
text-align: center;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 id="myHeader">
Demo Heading
</h1>
<p style="font-family: Arial, sans-serif; text-align: center;">This is a text outside.</p>
</body>
</html>
The output shows the heading with orange background and yellow border
Demo Heading (orange background, yellow border, centered) This is a text outside. (normal text, centered)
Multiple Unique IDs in Layout
When creating page layouts, each section should have its own unique ID for proper styling and targeting.
Example
Following example shows four different unique IDs used for layout positioning
<!DOCTYPE html>
<html>
<head>
<title>Multiple Unique IDs</title>
<style>
#container {
width: 100%;
text-align: center;
font-family: Arial, sans-serif;
overflow: hidden;
}
#left {
float: left;
width: 120px;
border: 2px solid green;
padding: 10px;
margin: 5px;
}
#right {
float: right;
width: 120px;
border: 2px solid orange;
padding: 10px;
margin: 5px;
}
#center {
margin: 5px auto;
width: 120px;
border: 2px solid red;
padding: 10px;
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<h3>Left</h3>
</div>
<div id="right">
<h3>Right</h3>
</div>
<div id="center">
<h3>Center</h3>
</div>
</div>
</body>
</html>
Each div has a unique ID and displays in its respective position with distinct border colors
Left Right (green) (orange) Center (red)
What Happens with Duplicate IDs
While browsers may still render pages with duplicate IDs, this violates HTML standards and causes unpredictable behavior. JavaScript's getElementById() will return only the first element with the specified ID, and CSS styling may not apply consistently across all elements.
Example Correct vs Incorrect Usage
<!DOCTYPE html>
<html>
<head>
<title>ID Uniqueness Demonstration</title>
<style>
#highlight { background-color: yellow; padding: 10px; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<p id="highlight">First paragraph with ID 'highlight'</p>
<p id="highlight">Second paragraph with same ID (INVALID)</p>
<button onclick="changeFirst()">Change First Element</button>
<p id="result"></p>
<script>
function changeFirst() {
var element = document.getElementById("highlight");
element.style.color = "red";
document.getElementById("result").textContent = "Only the first element changed - this proves getElementById() finds only the first match!";
}
</script>
</body>
</html>
Clicking the button will only affect the first paragraph, demonstrating why duplicate IDs cause problems.
Best Practices for ID Usage
Following are the recommended practices when using ID attributes
Plan your IDs Use descriptive, meaningful names like
main-navigationinstead of generic names likediv1.Use classes for repeated styling If multiple elements need the same styling, use CSS classes instead of IDs.
Validate your HTML Use HTML validators to catch duplicate ID errors during development.
Follow naming conventions Use kebab-case (
my-header) or camelCase (myHeader) consistently.
Example Using Classes Instead of Duplicate IDs
<!DOCTYPE html>
<html>
<head>
<title>Classes vs IDs</title>
<style>
.warning-box {
background-color: #fff3cd;
border: 1px solid #ffeaa7;
padding: 15px;
margin: 10px 0;
font-family: Arial, sans-serif;
}
#main-warning {
font-weight: bold;
color: #856404;
}
</style>
</head>
<body>
<div class="warning-box" id="main-warning">
Primary Warning: Check your input!
</div>
<div class="warning-box">
Secondary Warning: Save your work.
</div>
<div class="warning-box">
General Warning: Review before submitting.
</div>
</body>
</html>
Here, the warning-box class provides common styling to all warning messages, while the unique ID main-warning adds special styling only to the primary warning.
Primary Warning: Check your input! (bold, dark yellow) Secondary Warning: Save your work. (normal, light yellow background) General Warning: Review before submitting. (normal, light yellow background)
Conclusion
ID attributes must be unique within the entire HTML document to ensure proper functionality of CSS, JavaScript, and browser features. When multiple elements require similar styling, use CSS classes instead of duplicate IDs. Always validate your HTML to catch and fix duplicate ID errors during development.
270 Views
