What are valid values for the id attribute in HTML?
The id attribute is used as a unique identifier for the HTML element. The id should be assigned with some unique name among the HTML element. It is basically used in CSS to identify the element for styling.
Valid values for id attribute in HTML 5
In HTML 5, the restriction for the valid id values are:
- It must be unique in the document.
- It must not contain any special character.
- It must contain at least one character.
- The ids are case sensitive
Example: Valid id for HTML 5
Here is an example to show a valid id that can be used with HTML element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2> valid Id </h2>
<div id="123"> id=123 </div>
<div id="#%LV-||">id= #%LV-|| </div>
<div id="____V">id= _____V </div>
<div id="{}"> id-=} </div>
<div id="@"> id=@ </div>
</body>
</html>
Output
Here is the output of the above code.
If you are using the above id with pure HTML code then it's fine. But if you are using CSS or Javascript along with it then you should follow more restrictions.
id valid for CSS
- In CSS, the identifier can contain only characters [a-z, A-Z, 0-9] plus the hyphen(-) and underscore(_).
- The identifier in CSS cannot start with a digit, two hyphens, or a hyphen followed by a digit.
Example: Valid id for CSS
For example, we have taken an id="1for" and id="for1" and we will style both of the ids with some CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
#1for{
color: pink;
font-weight: bold;
}
#for1{
color: pink;
font-weight: bold;
}
</style>
</head>
<body>
<h2> valid Id in CSS </h2>
<div id="1for"> id="1for" is invalid id in CSS so it doesnot get styled </div>
<div id="for1">id="for1" is valid id in css so it gets styled </div>
</body>
</html>
Output
As you can see in the output that the id="1for" is invalid as it has a digit at the starting so it does not change its style whereas the second id is valid so the text is styled with the CSS.
id valid for Javascript
The id can be used with javascript to perform some tasks for specific elements. So, we should also keep in mind that it should be valid for Javascript too.
- The id should not start with a digit, hyphen, or underscore followed by a hyphen.
- It should only contain [a-z, A-Z, 0-9] and underscore hyphens.
Example: Invalid id for JavaScript
Here is the example of an invalid id in javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2> Invalid Id in javascript </h2>
<p id="1for">Valid</p>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("1for").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>
Output
The output will not change as the id is not valid for javascript.
Example: Valid id in JavaScript
Now, let's take another example where we have used a valid id for the javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2> valid Id in javascript </h2>
<p id="for">Valid</p>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("for").innerHTML = "wow valid id !!!";
}
</script>
</body>
</html>
Output
So, the text has changed as it has a valid id for both HTML 5 as well as Javascript.
Conclusion
So, if you are only using HTML then there is no issue with id validity but if you want to add CSS and Javascript then check the id validity according to them too. Here, we have explained valid and invalid id for HTML, CSS, and JavaScript.
