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 add a unique id for an element in HTML?
The id attribute in HTML is used to assign a unique identifier to any HTML element. This unique ID serves multiple purposes: it allows CSS to target specific elements for styling, enables JavaScript to manipulate individual elements, and provides anchor points for navigation within a page.
Syntax
Following is the syntax for adding an id attribute to an HTML element −
<tag id="uniqueIdentifier">Content</tag>
The id value must be unique within the entire HTML document and should not contain spaces. It is case-sensitive and typically starts with a letter.
Key Rules for ID Attributes
When creating ID values, follow these important rules −
Uniqueness − Each ID must be unique within the document. No two elements can share the same ID.
No spaces − The ID value cannot contain any whitespace characters.
Case sensitivity − IDs are case-sensitive, so
myIdandmyidare different.Valid characters − Use letters, digits, hyphens, and underscores. Start with a letter for best compatibility.
Using ID with JavaScript
The primary use of ID attributes is to select and manipulate elements using JavaScript's getElementById() method.
Example
Following example demonstrates how to use the id attribute with JavaScript to change element content −
<!DOCTYPE html>
<html>
<head>
<title>ID Attribute with JavaScript</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Tutorialspoint</h1>
<p id="myid">We provide Tutorials!</p>
<button onclick="display()">More...</button>
<script>
function display() {
document.getElementById("myid").innerHTML = "We provide learning videos as well";
}
</script>
</body>
</html>
When you click the "More..." button, the paragraph text changes from "We provide Tutorials!" to "We provide learning videos as well" −
Tutorialspoint We provide Tutorials! [More...] (After clicking button:) Tutorialspoint We provide learning videos as well [More...]
Using ID with CSS Styling
The id attribute is commonly used as a CSS selector with the # symbol to apply styles to specific elements.
Example
Following example shows how to style an element using its ID −
<!DOCTYPE html>
<html>
<head>
<title>ID Attribute with CSS</title>
<style>
#header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
#content {
margin: 20px;
padding: 15px;
border: 2px solid #ddd;
border-radius: 5px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div id="header">Welcome to TutorialsPoint</div>
<div id="content">This content is styled using ID selectors.</div>
</body>
</html>
The CSS targets each element by its unique ID to apply different styles −
Welcome to TutorialsPoint (white text on green background, centered) This content is styled using ID selectors. (bordered box with padding)
Using ID for Anchor Links
ID attributes can create anchor points within a page, allowing users to jump directly to specific sections.
Example
Following example demonstrates using IDs for page navigation −
<!DOCTYPE html>
<html>
<head>
<title>ID for Anchor Links</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Table of Contents</h1>
<ul>
<li><a href="#section1">Introduction</a></li>
<li><a href="#section2">Getting Started</a></li>
<li><a href="#section3">Conclusion</a></li>
</ul>
<div style="height: 200px;"></div>
<h2 id="section1">Introduction</h2>
<p>This is the introduction section.</p>
<h2 id="section2">Getting Started</h2>
<p>This section covers getting started.</p>
<h2 id="section3">Conclusion</h2>
<p>This is the conclusion section.</p>
</body>
</html>
Clicking the links in the table of contents scrolls the page to the corresponding section with that ID.
Multiple Elements with JavaScript
You can use JavaScript to manipulate multiple elements with unique IDs simultaneously.
Example
Following example shows how to change styles of multiple elements using their IDs −
<!DOCTYPE html>
<html>
<head>
<title>Multiple IDs with JavaScript</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2 id="title1">First Title</h2>
<h2 id="title2">Second Title</h2>
<h2 id="title3">Third Title</h2>
<button onclick="changeColors()">Change Colors</button>
<script>
function changeColors() {
document.getElementById("title1").style.color = "red";
document.getElementById("title2").style.color = "green";
document.getElementById("title3").style.color = "blue";
}
</script>
</body>
</html>
Clicking the button changes each title to a different color based on its unique ID −
First Title (changes to red) Second Title (changes to green) Third Title (changes to blue) [Change Colors]
Conclusion
The id attribute provides a unique identifier for HTML elements, enabling targeted JavaScript manipulation, CSS styling, and anchor linking. Always ensure each ID is unique within the document and follows proper naming conventions for maximum compatibility across browsers and frameworks.
985 Views
