HtmlConceptBeginner · 3 min read

What is id Attribute in HTML: Definition and Usage

The id attribute in HTML is a unique identifier given to an element. It helps to target that element specifically with CSS or JavaScript, like giving a name tag to a single item in a group.

⚙️

How It Works

The id attribute works like a unique name for an HTML element. Imagine you have a classroom full of students, and you want to call one student by name. The id is that student's name, so you can find and talk to them directly without confusion.

In a webpage, each id must be unique, meaning no two elements can share the same id. This uniqueness allows CSS and JavaScript to find exactly one element quickly and apply styles or actions to it.

For example, if you want to change the color of a specific heading or make a button do something when clicked, you use the id to point to that exact element.

💻

Example

This example shows a heading with an id and how CSS uses it to change the color.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>id Attribute Example</title>
  <style>
    #special-heading {
      color: teal;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1 id="special-heading">This heading has a unique id</h1>
  <p>This paragraph does not have an id.</p>
</body>
</html>

Output

A webpage with a large teal-colored bold heading that says: 'This heading has a unique id' and a normal paragraph below it.

🎯

When to Use

Use the id attribute when you need to identify one specific element on the page. This is helpful for:

Applying unique styles with CSS to a single element.
Accessing or changing that element with JavaScript, like responding to clicks or updating content.
Linking directly to a part of the page using anchor links (e.g., #section1).

For example, if you have a special button that triggers a popup, giving it an id lets your script find and control it easily.

✅

Key Points

The id must be unique on the page.
It helps CSS and JavaScript target one element precisely.
Use id for elements that need special styling or behavior.
It can be used in URLs to jump to a specific part of the page.

✅

Key Takeaways

The id attribute uniquely identifies one HTML element on a page.

Use id to apply styles or scripts to a specific element.

Each id value must be unique within the HTML document.

The id can be used in URLs to link directly to page sections.

Avoid using the same id on multiple elements to prevent errors.