HTML id Attribute

Introduction

In HTML, the id attribute is a fundamental global attribute that lets you uniquely identify an element within a document. Each element can have one id value, and that value must not be reused anywhere else on the same page. Developers rely on id for CSS targeting, JavaScript selection, in-page anchor links, and form label associations.

What You’ll Learn

Purpose of id

The primary purpose of the id attribute is to serve as a unique identifier for an HTML element. This identifier is crucial for CSS rules that target a single element (#header), JavaScript that selects a specific node (document.getElementById("header")), hyperlinks that jump to a section (href="#footer"), and accessible label bindings (<label for="email">).

📝 Syntax

Add id to any element with a unique string value:

<div id="header">
  <h1>Welcome to My Website</h1>
</div>

<p id="main-content">
  This is the main content of the page.
</p>

<a href="#footer">Jump to Footer</a>

<div id="footer">
  © 2026 My Website. All rights reserved.
</div>

Syntax Rules

• Each id value must be unique within the entire HTML document.
• Values must contain at least one character and must not contain ASCII spaces.
• Use descriptive, readable names (e.g. main-nav, signup-form).
• Start with a letter when possible so CSS selectors like #my-id work without escaping.
• An element may have only one id attribute; it cannot list multiple ids like class.
• Fragment links use href="#id-value" matching the target element’s id.

💎 Values

The id attribute accepts a string that uniquely names the element. Important considerations:

• Uniqueness — Never reuse the same id on two elements. Duplicates break getElementById and fragment navigation.
• Naming conventions — Use lowercase letters, digits, hyphens, underscores, colons, and periods. Avoid spaces and vague names like div1.
• Case sensitivity — id="Header" and id="header" are different values; stay consistent.
• Reserved caution — Do not reuse ids that belong to browser extensions or third-party scripts on the same page.

<!-- Good: descriptive, unique -->
<nav id="main-nav">...</nav>
<section id="pricing">...</section>

<!-- Form label target -->
<label for="email">Email</label>
<input type="email" id="email" name="email">

Applicable Elements

id vs class

Examples Gallery

Page sections with fragment links, CSS and label targeting, and dynamic id changes with JavaScript.

<div id="header">
  <h1>Welcome to My Website</h1>
</div>

<p id="main-content">
  This is the main content of the page.
</p>

<a href="#footer">Jump to Footer</a>

<div id="footer">
  © 2026 My Website. All rights reserved.
</div>

<style>
  #hero-title { color: #1d4ed8; }
</style>

<h1 id="hero-title">Welcome</h1>

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

<div id="dynamic-element">Original id</div>

<script>
  document.getElementById("dynamic-element").id = "new-dynamic-id";
</script>

♿ Accessibility

• Pair labels with ids — Use <label for="field-id"> matching id on inputs so screen readers announce the correct label.
• Provide skip links — An id on <main> (e.g. id="main-content") lets skip-navigation links jump past repetitive headers.
• Support ARIA references — Attributes like aria-labelledby and aria-describedby point to other elements by their id.
• Do not rely on id alone for meaning — Use semantic elements (<nav>, <main>, headings) in addition to ids.
• Keep ids stable — Changing ids breaks bookmarks, fragment links, and assistive technology references.

💡 Best Practices