HTML - id

The id is an important keyword in HTML. HTML "id" is an attribute used to uniquely identify an element within a web page. It serves as a label for that element and enables JavaScript and CSS to target it specifically.

HTML id attribute is defined in the HTML code using the "id" keyword, and the styling is determined in CSS. This identification helps in applying custom styles, making interactive features, and navigating within the webpage with precision. The "id" values must be unique within the document.

We highly recommend you to use classes to style any element through CSS..

Syntax for id

In CSS, you can target the id attribute by using a hash symbol (#) followed by the id name in HTML element. Try not to use id in CSS rather you can use class attribute. Ids are specially created to execute through JavaScript.

In HTML:

<element class="highlight">...</element>

In CSS:

/* CSS using id Attribute Selector */
#highlight {
   background-color: yellow;
   color: black;
   font-weight: bold;
}

In JavaScript:
```
document.getElementById('highlight')
```

Using HTML id Attribute

HTML ids are essential for managing events, and changing the structure of documents. In order to create interactive and dynamic web pages, it gives developers the ability to target particular parts and provide them specialized behavior and appearance. Rarely it is used to do the styling in CSS.

Define a id for Styling

In the following example, we have create two element one is h1 and other is p, and we set id on them as well "header" & "heightlight" but using the "heightlight" is in internal CSS to style our p element. You can use the "header" id in the similar way to style the h1 element.

<!DOCTYPE html>
<html>

<head>
   <style>
      <!-- CSS id attribute Selector Used -->
      #highlight {
         background-color: yellow;
         color: black;
         padding: 5px;
      }
   </style>
</head>

<body>
   <!-- Using id attribute in both Element -->
   <h1 id="header">Tutorialspoint</h1>
   <p id="highlight">Simply Easy Learning</p>
</body>

</html>

Using id Attribute through JavaScript

The ids are frequently used to identify elements for JavaScript functions. For example, you can use a id to target specific elements, like paragraph, and make them interactive through JavaScript. In the following code we have create a button which will trigger a function that will change the display property none to block of a p element. You will see a paragraph.

<!DOCTYPE html>
<html>

<head>
   <script>
      function showContent() {
         var element = document.getElementById('content');
         if (element.style.display === 'none') {
            element.style.display = 'block';
         } else {
            element.style.display = 'none';
         }
      }
   </script>
   <style>
      .interactive-button {
         background-color: #007bff;
         color: #fff;
         padding: 10px 20px;
         border: none;
         cursor: pointer;
      }
   </style>
</head>

<body>
   <button class="interactive-button" 
           onclick="showContent()">Click Me</button>
   <p class="content" style="display: none;">
       This content can be toggled by clicking the button.
   </p>
</body>

</html>

Difference between id and class in HTML

In HTML, the id attribute uniquely identifies a single element on a page, making it useful for targeting with CSS and JavaScript, and it must be unique within the document. The class attribute, on the other hand, can be applied to multiple elements, allowing for the grouping of elements that share common styles or behaviors.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Difference between id and class</title>
   <style>
      /* ID selector */
      #header {
         background-color: blue;
         color: white;
         padding: 10px;
      }
      /* Class selector */
      .button {
         background-color: green;
         color: white;
         padding: 5px 10px;
         margin: 5px;
      }
   </style>
</head>

<body>
      <!-- Unique ID for the header -->
      <div id="header">
         This is the header
      </div>
      <!-- Shared class for buttons -->
      <div class="button">
         Button 1
      </div>
      <div class="button">
         Button 2
      </div>
</body>

</html>

Things to Remember about id

The id attribute should contain at least one character should be there, the starting letter should be a character (a-z) or (A-Z), and the rest of the letters of any type can written even special characters.
The id attribute does not contain any spaces.
Within the document every id must be unique.

Valid id Attributes Pattern

Certain ID Attributes are valid in HTML 5, but not in Cascading Style Sheets. In such cases, it is recommended to go with simple output rather than styled output because certain values that we use for ID may be invalid in CSS.

Following example demonstrates the use of simple ID attributes.

Example

If we execute below code, two div elements will be displayed, one with id attribute (TutorialsPoint Website), and the other one with other id attribute (Html5 Tutorials, CSS Tutorials, JavaScript Tutorials).

<!DOCTYPE html>
<html>

<head>
   <title>Simple Id Attributes</title>
   <style>
      /* Remove @ from the code and run the code again */
      #@TP {
         color: #070770;
         text-align: center;
         font-size: 30px;
         font-weight: bold;
      }
      #@TP1 {
         text-align: center;
         font-size: 25px;
      }
   </style>
</head>

<body>
   <div id="@TP">
      TutorialsPoint Website
   </div>
   <div id="@TP1"> 
      Html5 Tutorials, CSS Tutorials, JavaScript Tutorials 
   </div>
</body>
</html>

If we remove the @ symbol from the id's value the it will become avalid id declaration and applied styles will be effected on the HTML Element.

Print Page