W3docs
en
Log in

Which are the Valid Values for the "id" Attribute

The “id” attribute defines a unique identifier for HTML elements. In this snippet, you can find out, which are its valid values for HTML, CSS, and Javascript.

Tags

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 <span class="attribute">id</span> attribute for HTML, CSS, and Javascript.

Syntax

Which are the Valid Values for the “id” Attribute

<tag id="id">&lt;/tag&gt;

In HTML4, the value of the <span class="attribute">id</span> 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 <span class="attribute">id</span> attribute must be unique, contain at least one character and shouldn’t contain space characters. There aren’t any other restrictions.

In XHTML, the <span class="attribute">id</span> attribute is case sensitive.

Let’s see an example:

Which are the Valid Values for the “id” Attribute

<tag id=":\1w3docs" >&lt;/tag&gt;

Here, the value of the <span class="attribute">id</span> 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 <span class="attribute">id</span> attribute in HTML and CSS.

Example of invalid values of the <span class="attribute">id</span> attribute in 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>
Try it Yourself »

In the example above, we used two <span class="attribute">id</span> 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 <span class="attribute">id</span> attribute both in HTML5 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>
Try it Yourself »

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 <span class="attribute">id</span> attribute in 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>
Try it Yourself »

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 <span class="attribute">id</span> attribute both in HTML5 and 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>
Try it Yourself »