Related Articles

Related Articles

What are valid values for the id attribute in HTML?
  • Difficulty Level : Medium
  • Last Updated : 30 Aug, 2019

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:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :