Which are the Valid Values for the "id" Attribute

The id attribute defines a unique identifier for HTML elements. It must be unique within the document. In general, it points a style in a style sheet, anchor links, and targets for scripts.

In this snippet, we’re going to discuss the valid values of the id attribute for HTML, CSS, and Javascript.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Syntax

<tag id="id"></tag>

In HTML4, the value of the id attribute must begin with a letter (A-Z, a-z) and can be followed by letters, digits (0-9), colons (:), periods (.), hyphens (-), and underscores (_).

In HTML5, the id attribute must be unique, contain at least one character and shouldn’t contain space characters. There aren’t any other restrictions.

In XHTML, the id attribute is case sensitive.

Let’s see an example:

<tag id=":\1w3docs" ></tag>

Here, the value of the id attribute is valid in HTML5. However, in CSS and Javascript, identifiers can contain only letters (A-Z, a-z) and digits (0-9).

Now, we’ll demonstrate examples of valid and invalid values of the id attribute in HTML and CSS.

Example of invalid values of the id attribute in CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #1w3docs {
        color: #160987;
        font-size: 60px;
        font-weight: bold;
        text-align: center;
      }
      #2w3docs {
        text-align: center;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div id="1w3docs">W3Docs</div>
    <div id="2w3docs">
      Learn programming
    </div>
  </body>
</html>

In the example above, we used two id attributes: 1w3docs and 2w3docs. However, being styled with CSS, they give a simple output because the values are invalid in CSS.

In our next example, you can see the styled outcome of the code, since we use values that are valid both in HTML and CSS.

Example of valid values of the id attribute both in HTML5 and CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #w3docs {
        color: #160987;
        font-size: 60px;
        font-weight: bold;
        text-align: center;
      }
      #programming {
        text-align: center;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div id="w3docs">W3Docs</div>
    <div id="programming">
      Learn programming
    </div>
  </body>
</html>

Next, see examples of valid and invalid values in HTML and JavaScript.

Here too, first see an example with a value that is valid in HTML5 but invalid in Javascript, and then, the example with valid values for both HTML5 and Javascript.

Example of invalid values of the id attribute in Javascript:

<!DOCTYPE html>
<HTML>
  <head>
    <title>Title of the document</title>
    <style>
      #:\1w3dosc {
        color: #666;
      }
    </style>
  </head>
  <body>
    <h1 id=":\1w3docs">Example</h1>
    <button onclick="displayResult()">
      Click here
    </button>
    <script>
      function displayResult() {
        document.getElementById(
            ":\1w3dosc")
          .innerHTML = "Hello world!";
      }
    </script>
  </body>
</html>

If you click the button "Click here" in the example above, nothing will happen because of the invalid value for JavaScript.

Example of valid values of the id attribute both in HTML5 and Javascript:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #w3docs {
        color: #666;
      }
    </style>
  </head>
  <body>
    <h1 id="w3docs">Example</h1>
    <button onclick="displayResult()">
      Click here
    </button>
    <script>
      function displayResult() {
        document.getElementById(
            "w3docs")
          .innerHTML = "Hello world!";
      }
    </script>
  </body>
</html>