Learn Java, Angular, SQL with Coding Exercises & Career Tips

The id attribute in HTML is used to uniquely identify a specific element on a web page. It is incredibly useful for

Styling specific elements with CSS
Accessing elements in JavaScript
Creating in-page navigation (anchor links)

Syntax:

<tag id="uniqueId">Content</tag>

Example: apply css with the help of id

<!DOCTYPE html>
<html>
 <head>
  <title>HTML id Example</title>
  <style>
    #main-headiing{
         background-color: beige;
         color: rgb(203, 32, 9);
         padding: 10px;
         text-align: center;
          }
     #paragraph {
          border: 2px solid yellow;
          padding: 8px;
         }
  </style>
 </head>
 <body>
   <h1 id="main-heading">Welcome to Our Website</h1>
   <p id="paragraph">Thank you for visiting</p>
 </body>
</html>

Output:

Accessing id in JavaScript
You can easily select and modify elements by their id using JavaScript.

Example:

<!DOCTYPE html>
<html>
 <head>
  <title>Id in JavaScript</title>
  <script>
    function changeText() {
        document.getElementById("main-heading").innerHTML = "Text Changed!";
          }
  </script>
 </head>
 <body>
  <h1 id="main-heading">Original Heading</h1>
  <button onclick="changeText()">Change Text</button>
 </body>
</html>

Output:

Text will change by clicking on the button 'Change Text'.

Creating Anchor Links with id

You can use id to jump to a specific section of a webpage.

Example:

<!DOCTYPE html>
<html>
 <head>
  <title>Anchor Links with id</title>
 </head>
 <body>
 <a href="#about">Go to About Section</a>

<!-- Some other content -->

  <h2 id="about">About Us</h2>
  <p>This section talks about our company.</p>

 </body>
</html>

Output:

By clicking on 'Go to About Section' you will go to section through which this anchor tag is linked with the help of id.

Tips

Use id when targeting a single unique element.
Avoid reusing the same id in one page.
For reusable styles, prefer class over id.
When used in CSS or JS, prefix with # (Ex- #main-heading).

Key Point

id must be unique within the entire HTML document.
It is case-sensitive (#Main is different from #main).
An id can be used with CSS, JavaScript, or for page anchors.
The id value should not contain spaces.