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
How to specify a unique id for an element in HTML?
The id attribute in HTML specifies a unique identifier for an element. The id value must be unique across the entire HTML document. The id attribute is used to reference elements in CSS stylesheets for styling and in JavaScript for element manipulation and access.
Syntax
Following is the syntax for using the id attribute −
<tag id="uniqueValue">Content</tag>
Where uniqueValue is a string that uniquely identifies the element within the document. To reference it in CSS, use #uniqueValue, and in JavaScript, use document.getElementById("uniqueValue").
ID Attribute Rules
The id attribute follows these important rules −
Must be unique within the HTML document
Cannot contain spaces
Must contain at least one character
Case-sensitive (id="MyDiv" is different from id="mydiv")
Should start with a letter for best compatibility with CSS and JavaScript
Using ID with CSS Styling
In CSS, the id attribute is referenced using the hash symbol (#) followed by the id value. This allows you to apply specific styles to a single element.
Example
In the following example we are using <h1> with id name "tutorial". This <h1> will get styled according to the #tutorial CSS rule −
<!DOCTYPE html>
<html>
<head>
<title>ID with CSS Example</title>
<style>
#tutorial {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
border-radius: 8px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h1 id="tutorial">Welcome Everyone..</h1>
</body>
</html>
The output displays the heading with light blue background, centered text, and padding −
Welcome Everyone.. (centered, black text on light blue background with padding)
Using ID with JavaScript
JavaScript uses the getElementById() method to access and manipulate elements with specific id values. This is one of the most common ways to interact with HTML elements dynamically.
Example
JavaScript uses the unique id and manipulates the element with given id −
<!DOCTYPE html>
<html>
<head>
<title>ID with JavaScript Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h1 id="tutorial">Hello</h1>
<button onclick="displayResult()">Change Text</button>
<script>
function displayResult() {
document.getElementById("tutorial").innerHTML = "WELCOME";
}
</script>
</body>
</html>
Initially, the page displays "Hello". When you click the "Change Text" button, the text changes to "WELCOME" −
Before click: Hello After click: WELCOME
Example − Multiple ID Usage
Following example demonstrates using multiple unique IDs in a single document −
<!DOCTYPE html>
<html>
<head>
<title>Multiple IDs Example</title>
<style>
#header {
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
}
#content {
background-color: #f1f1f1;
padding: 20px;
margin: 10px 0;
}
#footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div id="header">Website Header</div>
<div id="content">Main content area with unique styling.</div>
<div id="footer">Website Footer</div>
</body>
</html>
Each div has a unique id and receives different styling −
Website Header (white text, green background, centered) Main content area with unique styling. (gray background, padding) Website Footer (white text, dark background, centered)
ID vs Class Comparison
Understanding the difference between id and class attributes is important for proper HTML structure −
| ID Attribute | Class Attribute |
|---|---|
| Must be unique in the document | Can be used on multiple elements |
| Referenced with # in CSS | Referenced with . in CSS |
| Higher CSS specificity | Lower CSS specificity |
| Used for specific element targeting | Used for grouping similar elements |
| Accessed via getElementById() | Accessed via getElementsByClassName() |
Common Use Cases
The id attribute is commonly used for −
Page sections − Header, navigation, main content, sidebar, footer
Form elements − Specific input fields that need unique JavaScript handling
Anchor linking − Creating bookmarks within a page (e.g., table of contents)
JavaScript targets − Elements that need to be manipulated by scripts
CSS specificity − When you need to override other styles with high specificity
Conclusion
The id attribute provides a unique identifier for HTML elements, enabling targeted CSS styling and JavaScript manipulation. Each id must be unique within the document, making it ideal for identifying specific elements that require individual treatment. Use ids for unique elements and classes for groups of similar elements.
2K+ Views
