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
What are valid values for the id attribute in HTML?
The ID attribute in HTML is a unique identifier for an element. It helps in identifying a specific area on a web page for CSS styling, JavaScript targeting, and anchor linking.
Let us first see the common uses of the ID attribute in HTML −
-
Script reference − In JavaScript, we use the ID attribute to select and manipulate a specific element on the page using methods like
getElementById(). -
CSS selector − The ID is used as a selector with the
#symbol to apply styles to a single specific element on the page. -
Anchor linking − The browser navigates to a particular section in a document by pointing to the ID at the end of the URL preceded by a hash mark (e.g.,
page.html#section1).
Syntax
Following is the syntax for using the ID attribute in HTML −
<tag id="value">Content</tag>
Here, value is a string that uniquely identifies the element within the document. To reference it in CSS, use #value, and in JavaScript, use document.getElementById("value").
ID Attribute Rules in HTML5
The HTML5 specification defines the following rules for valid ID values −
-
The ID must contain at least one character.
-
The ID must not contain any spaces.
-
Each ID must be unique within the document.
-
In HTML5, an ID can start with any character including letters, numbers, hyphens, underscores, or even special characters. However, for compatibility with CSS and JavaScript, it is best to start with a letter (a-z or A-Z).
Note − While HTML5 allows IDs like 1TP or @TP, these values cause problems when used as CSS selectors or in JavaScript's querySelector(). It is best practice to use IDs that start with a letter and contain only letters, digits, hyphens, and underscores.
Using ID with CSS Styling
Class Attribute
We can create a class in the opening tag of any element. To apply styles to the class, we use the . (period) symbol followed by the class name in the style block.
Example
Following example shows how class and ID attributes are used together for styling −
<!DOCTYPE html>
<html>
<head>
<title>Class and ID Attribute</title>
<style>
.heading { color: green; text-align: center; }
#heading { color: red; text-align: center; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h1 class="heading">Welcome To TutorialsPoint.</h1>
<h2 id="heading">HTML5 Tutorial</h2>
</body>
</html>
The first heading uses a class selector and appears in green. The second heading uses an ID selector and appears in red −
Welcome To TutorialsPoint. (green, centered) HTML5 Tutorial (red, centered)
Difference Between ID and Class Attribute
The key difference is that an ID identifies one unique element, while a class can be applied to multiple elements.
| ID Attribute | Class Attribute |
|---|---|
| Each element can have only one ID. | You can use the same class on multiple elements. |
| Each page must have only one element with that ID. | You can use multiple classes on the same element. |
Selected in CSS with # symbol. |
Selected in CSS with . symbol. |
Valid ID with CSS Styling
Certain ID values are valid in HTML5 but not usable as CSS selectors. IDs starting with a digit or containing special characters like @ cannot be directly used in CSS without escaping. It is recommended to use simple alphanumeric IDs for consistent behavior.
Example − Invalid ID in CSS
In this example, the IDs start with @ which is valid HTML5 but the CSS selectors #@TP will not work. The styles will not be applied −
<!DOCTYPE html>
<html>
<head>
<title>Invalid CSS ID Selector</title>
<style>
#@TP { color: #070770; text-align: center; font-size: 30px; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<div id="@TP">TutorialsPoint Website</div>
<div id="@TP1">HTML5, CSS, JavaScript Tutorials</div>
</body>
</html>
The CSS styles are not applied because #@TP is not a valid CSS selector −
TutorialsPoint Website (unstyled, default text) HTML5, CSS, JavaScript Tutorials (unstyled, default text)
Example − Valid ID in CSS
Now, using proper alphanumeric IDs that work in both HTML and CSS −
<!DOCTYPE html>
<html>
<head>
<title>Valid ID Attributes</title>
<style>
#TP1 { color: #070770; text-align: center; font-size: 30px; font-weight: bold; }
#TP2 { text-align: center; font-size: 25px; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<div id="TP1">TutorialsPoint Website</div>
<div id="TP2">HTML5 Tutorials, CSS Tutorials, JavaScript Tutorials</div>
</body>
</html>
With valid IDs, the CSS styles are properly applied −
TutorialsPoint Website (blue, bold, 30px, centered) HTML5 Tutorials, CSS Tutorials, JavaScript Tutorials (25px, centered)
Valid ID with JavaScript
IDs that start with digits or contain special characters can still be accessed using getElementById() since it matches the exact string. However, they will fail with querySelector() which uses CSS selector syntax.
Example − Working ID with JavaScript
Following example shows a valid ID that works with both JavaScript and CSS −
<!DOCTYPE html>
<html>
<head>
<title>Valid ID with JavaScript</title>
<style>
#TP { color: blue; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2 id="TP">TutorialsPoint WEBSITE Content</h2>
<button onclick="displayResult()">Display</button>
<script>
function displayResult() {
document.getElementById("TP").innerHTML = "Welcome to TutorialsPoint!";
}
</script>
</body>
</html>
When the ID value uses only letters, both JavaScript and CSS work correctly. Clicking the "Display" button changes the heading text −
Before click: TutorialsPoint WEBSITE Content (blue text) After click: Welcome to TutorialsPoint! (blue text)
Example − ID with Anchor Linking
Following example shows how the ID attribute is used for anchor linking to navigate within a page −
<!DOCTYPE html> <html> <head> <title>ID for Anchor Linking</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <h2>Table of Contents</h2> <a href="#section-html">Go to HTML Section</a> <a href="#section-css">Go to CSS Section</a> <div style="height: 400px;"></div> <h2 id="section-html">HTML Section</h2> <p>HTML stands for HyperText Markup Language.</p> <h2 id="section-css">CSS Section</h2> <p>CSS stands for Cascading Style Sheets.</p> </body> </html>
Clicking the anchor links scrolls the page to the corresponding section identified by its ID.
Conclusion
In HTML5, any non-empty string without spaces is technically a valid ID value. However, for best cross-platform compatibility with CSS and JavaScript, use IDs that start with a letter and contain only letters, digits, hyphens (-), and underscores (_). Always ensure each ID is unique within the document.
2K+ Views
