The id Attribute

The id Attribute

Global Attribute

The id attribute provides a unique identifier for an HTML element within a document. Each id value must be unique across the entire page, making it perfect for targeting specific elements with CSS, JavaScript, or fragment identifiers.

Syntax

<element id="unique-identifier">Content</element>

Values

Value	Description
text	A unique string that identifies the element. Must contain at least one character and cannot contain spaces. Case-sensitive.

Caution

Each id value must be unique within the document. Using duplicate IDs can cause unexpected behavior in CSS and JavaScript.

Examples

Basic Usage

HTML

<h1 id="main-title">Welcome to HTML.sh</h1> <p id="intro">Learn HTML the easy way!</p> <style> #main-title { color: #2563eb; border-bottom: 3px solid #dbeafe; padding-bottom: 8px; } #intro { color: #64748b; font-size: 1.1em; } </style>

Result ▶ Run

Fragment Identifiers (Page Anchors)

HTML

<nav> <a href="#section1">Jump to Section 1</a> | <a href="#section2">Jump to Section 2</a> | <a href="#section3">Jump to Section 3</a> </nav> <section id="section1" style="margin-top: 30px;"> <h2>Section 1</h2> <p>Content for the first section...</p> </section> <section id="section2" style="margin-top: 30px;"> <h2>Section 2</h2> <p>Content for the second section...</p> </section> <section id="section3" style="margin-top: 30px;"> <h2>Section 3</h2> <p>Content for the third section...</p> </section>

Result ▶ Run

JavaScript Targeting

HTML

<button id="click-me">Click Me!</button> <p id="message"></p> <script> const button = document.getElementById('click-me'); const message = document.getElementById('message'); button.addEventListener('click', () => { message.textContent = 'Button was clicked!'; message.style.color = '#16a34a'; message.style.fontWeight = 'bold'; }); </script>

Result ▶ Run

Accessibility with Labels

HTML

<label for="email-input">Email Address:</label> <input type="email" id="email-input" placeholder="you@example.com"> <div style="margin-top: 20px;"> <label for="country-select">Country:</label> <select id="country-select"> <option>United States</option> <option>Canada</option> <option>United Kingdom</option> </select> </div> <style> label { display: inline-block; width: 120px; font-weight: 600; } input, select { padding: 6px 10px; border: 2px solid #cbd5e1; border-radius: 4px; } </style>

Result ▶ Run

Best Practices

Use Meaningful IDs

Choose descriptive names that reflect the element’s purpose:

<!-- Good -->
<nav id="main-navigation"></nav>
<form id="contact-form"></form>
<div id="search-results"></div>

<!-- Avoid -->
<nav id="nav1"></nav>
<form id="form"></form>
<div id="div3"></div>

Follow Naming Conventions

Use consistent naming patterns throughout your project:

<!-- kebab-case (recommended) -->
<header id="site-header"></header>
<div id="user-profile-card"></div>

<!-- camelCase (also common) -->
<header id="siteHeader"></header>
<div id="userProfileCard"></div>

Avoid Starting with Numbers

While modern browsers support it, IDs starting with numbers can cause issues:

<!-- Problematic in CSS -->
<div id="1st-section"></div>

<!-- Better -->
<div id="first-section"></div>
<div id="section-1"></div>

Keep IDs Unique

Never reuse the same ID on multiple elements:

<!-- Wrong - duplicate IDs -->
<div id="content">First</div>
<div id="content">Second</div>

<!-- Correct - unique IDs -->
<div id="content-primary">First</div>
<div id="content-secondary">Second</div>

Accessibility Considerations

Form Labels

The id attribute enables proper form labeling, crucial for screen readers:

<label for="username">Username:</label>
<input type="text" id="username" name="username">

When a user clicks the label, the associated input receives focus, improving usability.

ARIA Relationships

IDs are essential for ARIA attributes that establish relationships between elements:

<button aria-describedby="help-text">Submit</button>
<div id="help-text">Click to submit the form</div>

<h2 id="dialog-title">Confirm Action</h2>
<div role="dialog" aria-labelledby="dialog-title">
  <p>Are you sure you want to continue?</p>
</div>

Skip Links

Use IDs to create skip navigation links for keyboard and screen reader users:

<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Other navigation -->
<main id="main-content">
  <!-- Page content -->
</main>

Browser Support

The id attribute is supported by all browsers and has been part of HTML since the beginning.

Browser	Support
Chrome	All versions
Firefox	All versions
Safari	All versions
Edge	All versions

Common Use Cases

CSS Styling

<div id="hero-banner">
  <h1>Welcome!</h1>
</div>

<style>
  #hero-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60px 20px;
    text-align: center;
  }
</style>

JavaScript Manipulation

<div id="counter">0</div>
<button onclick="increment()">Increment</button>

<script>
  function increment() {
    const counter = document.getElementById('counter');
    counter.textContent = parseInt(counter.textContent) + 1;
  }
</script>

URL Fragments

<!-- In URL: https://example.com/page.html#contact -->
<section id="contact">
  <h2>Contact Us</h2>
  <!-- Form content -->
</section>

Related Attributes

• class - Apply styles to multiple elements
• name - Identify form elements (can be duplicated)
• data-* - Store custom data on elements

Specifications

• HTML Living Standard - The id attribute
• WAI-ARIA - ID References