View Categories

HTML – id

Table of Contents

The id attribute in HTML is used to uniquely identify a specific element within a web page. It acts as a label for the element, allowing JavaScript and CSS to target it with precision. Each id value in a document must be unique, which makes it different from the class attribute that can be reused across multiple elements.

While the id attribute can be used for styling in CSS, it is most commonly used to execute JavaScript functions or to create internal links for navigation purposes.

Syntax for id #

In CSS, you can select an element with a specific id by using the hash symbol # followed by the id name. It is generally recommended to use classes for styling elements in CSS, and use id for targeting specific elements through JavaScript.

HTML:

<element id="uniqueID">...</element>

CSS:

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

JavaScript:

document.getElementById('uniqueID');

Using HTML id Attribute #

HTML ids are essential for managing dynamic interactions, such as triggering JavaScript events or manipulating content within a web page. It is also helpful in navigating between sections on a page. However, unlike classes, the id attribute should not be reused multiple times in a single document.

Example: Defining an id for Styling #

In this example, two elements, an h1 and a p tag, have been assigned ids. The highlight id is used in internal CSS to style the p element. You can similarly use the header id for styling the h1 element.

<!DOCTYPE html>
<html>
<head>
   <style>
      /* CSS id selector */
      #highlight {
         background-color: yellow;
         color: black;
         padding: 5px;
      }
   </style>
</head>
<body>
   <!-- Using id attribute for each element -->
   <h1 id="header">Coaching Wallah</h1>
   <p id="highlight">Learn with ease!</p>
</body>
</html>

Using id with JavaScript #

The id attribute is particularly useful in JavaScript. For instance, you can manipulate the content of an element based on its id value. In the example below, we create a button that toggles the visibility of a paragraph element by changing its display property.

<!DOCTYPE html>
<html>
<head>
   <script>
      function toggleContent() {
         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="toggleContent()">Click Me</button>
   <p id="content" style="display: none;">This content is now visible!</p>
</body>
</html>

Difference Between id and class in HTML #

The id attribute is used to uniquely identify an element, which can be very useful in both CSS and JavaScript. The class attribute, on the other hand, is intended to apply shared styles or behaviors to multiple elements on a page.

Example:

<!DOCTYPE html>
<html>
<head>
   <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>
   <!-- Using a unique id for the header -->
   <div id="header">Coaching Wallah Header</div>

   <!-- Using a shared class for multiple buttons -->
   <div class="button">Button 1</div>
   <div class="button">Button 2</div>
</body>
</html>

Things to Remember About id #

  • The id attribute must be unique within a document.
  • The id value should begin with a letter (a-z or A-Z), and can contain numbers, hyphens, or underscores.
  • Avoid using spaces within id values.
  • Use id for JavaScript or in cases where you need a unique identifier, and prefer class for styling.

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment