What are valid values for the id attribute in HTML?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 2: Now we will change the value od 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.