HTML ID

The id attribute is used to specify the unique ID for an element of the HTML document. It allocates a unique identifier to each element which is used by the CSS and the JavaScript for performing certain tasks on that element.

The id name is case-sensitive! The id name must contain at least one character, and must not contain whitespaces (spaces, tabs, etc.).

Syntax for Id

Id for CSS

In CSS, whenever referencing an element, an ID starts with a hash character (#) followed by an id name. Then, CSS properties are defined inside the curly braces {}:

<html>

   <head>

      <title>This is document title</title>

   </head>

      <style>

         #language {

            background-color: #ddd;

            color: white;

            padding: 10px;

         }

      </style>

   </head>

   <body>

      <h2 id="language">HTML</h2>

   </body>

</html>

Test Yourself

Difference Between Class and Id

A class name can be used by multiple HTML elements, while an id name must be unique and must only be used by a single HTML element within the page:

<html>

   <head>

      <title>This is document title</title>

   </head>

      <style>

         #language {

            background-color: #ddd;

            color: white;

            padding: 10px;

         }

         .coloredBlock{

            color: #ccc;

         }

      </style>

   </head>

   <body>

      <h2 id="language">HTML</h2>

      <h1 class="coloredBlock">Markup Language</h1>

      <h1 class="coloredBlock">Tags and attributes</h1>

   </body>

</html>

Test Yourself

Bookmarks With Id and Links

Bookmarks are used to allow readers to jump to specific parts of a webpage, especially when the page is very long.

To use a bookmark, you must first create an ID for it and then add a link to that ID.

Then, when the link is clicked, the page will scroll to the location with the corresponding bookmark ID.

<html>

   <head>

      <title>This is document title</title>

   </head>

      <style>

         #language {

            background-color: #ddd;

            color: white;

            padding: 10px;

         }

      </style>

   </head>

   <body>

      <a href="#language">Jump to HTML</a>

      <h2 id="language">HTML</h2>

   </body>

</html>

Test Yourself

Whenever a user clicks on “Jump to HTML”, it will add “#language” to URL and then move the page to HTML section where id=”language” is present.

Id Attribute in Javascript

The id attribute can also be used by JavaScript to perform some tasks on that specific element. JavaScript can access an element with a specific id with the getElementById() method. Note that here in this method you aren't supposed to add a hash as a prefix to the id name, because it is given by the name of the method that accepts an id.

<html>

   <head>

      <title>This is document title</title>

      <style>

         #language {

            background-color: #ddd;

            color: white;

            padding: 10px;

         }

      </style>

   </head>

   <body>

      <a href="#language">Jump to HTML</a>

      <h2 id="language">HTML</h2>

      <script>    

         var language = document.getElementById("language");   

         language.style.display = "none";

      </script>

   </body>

</html>

Test Yourself