What are valid values for the id attribute in HTML?

Last Updated : 08 Feb, 2023

The id attribute is a unique identifier which is used to specify a document. The id attribute is used using #(hash) symbol followed by id. The value must be unique amongst all the IDs in the element’s home subtree. Syntax:

  <tag id = #Values>

Permitted values for ID attribute: As of HTML5, id must satisfy these three conditions:

Must be unique in the document.
Must not contain any space characters.
Must contain at least one character.

So the value can be all digits, just one digit, include special characters, etc. Just no whitespace. In HTML 5 these values of ids are valid:

  <tag id = "#999" > .... </tag >    <tag id = "#%LV-||" > .... </tag >    <tag id = " ____V" > .... </tag >    <tag id = "{}" > .... </tag >    <tag id = " ©" > .... </tag >

Note: Using numbers or special characters in the value of an ID may cause trouble in other contexts (CSS, JavaScript). Example:

 <tag id = ".\1gfg" > .... <\tag >

This ID is valid in HTML 5 But in CSS, javaScript identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9]. Now we will see examples of valid and invalid ID values in HTML and CSS. Example 1: The value of id is 1gfg and 1geeks which are valid in HTML 5 but not in CSS. So we just get simple output instead of styled output because the value of ID is invalid in CSS.

html

   <!DOCTYPE html>
<html>
 
<head>
    <title>Id Attributes</title>
    <style>
        #1gfg {
            color: #009900;
            font-size: 50px;
            font-weight: bold;
            text-align: center;
        }
         
        #1geeks {
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
 
<body>
    <div id="1gfg">GeeksforGeeks</div>
    <div id="1geeks">
      A computer science portal for geeks
  </div>
</body>
 
</html>
 
  

Output: Example 2: Now we will change the value of IDs but code remains same as before. The value of id is gfg and geeks which are valid in HTML 5 as well as valid in CSS. So we will get styled output this time, Because the value of ID is valid in CSS.

html

   <!DOCTYPE html>
<html>
 
<head>
    <title>Id Attributes</title>
    <style>
        #gfg {
            color: #009900;
            font-size: 50px;
            font-weight: bold;
            text-align: center;
        }
         
        #geeks {
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
 
<body>
    <div id="gfg">GeeksforGeeks</div>
    <div id="geeks">
      A computer science portal for geeks
  </div>
</body>
 
</html>
 
  

Output: We just saw an example of valid ID values in HTML and CSS. Now we see another example of valid and invalid ID values in HTML and javaScript. Example 3: We will take ID value .\1gfg which is valid in HTML 5 but invalid in javaScript. So After clicking change text button nothing will happen cause value of ID is invalid for javaScript.

html

   <html>
 
<body>
 
    <h1 id=".\1gfg">Hello Geeks!</h1>
    <button onclick="displayResult()">
      Change text
  </button>
 
    <style>
        #.\1gfg {
            color: green;
        }
    </style>
 
    <script>
        function displayResult() {
            document.getElementById(
              ".\1gfg").innerHTML = "GeeksForGeeks!";
        }
    </script>
 
</body>
 
</html>
 
  

Output: Now we will see another example in which we will change the value of ID from .\1gfg to gfg and change button will work Hello Geeks! will replace by GeeksForGeeks with Green color, because value of ID is valid for JavaScript. Example 4:

html

   <html>
 
<body>
 
    <h1 id="gfg">Hello Geeks!</h1>
    <button onclick="displayResult()">
      Change text
  </button>
    <style>
        #gfg {
            color: green;
        }
    </style>
    <script>
        function displayResult() {
            document.getElementById(
              "gfg").innerHTML = "GeeksForGeeks!";
        }
    </script>
 
</body>
 
</html>
 
  

Output:

What is the use of integrity attribute in HTML ?

light_yagami07

Improve

Article Tags :

What are valid values for the id attribute in HTML?

html

html

html

html

Similar Reads