HTML id Attribute

The HTML id attribute assigns a unique identifier to an element. That single, page-wide name lets you target the element from CSS, link straight to it from a URL, grab it from JavaScript, and wire it up for accessibility. Because the id is a global attribute, you can put it on any HTML element.

This page covers the one rule you must never break (uniqueness), valid id syntax, and the four jobs an id does in real pages: fragment links, CSS styling, JavaScript selection, and form/accessibility associations. The id is part of the global attributes that every element accepts.

The core rule: an id must be unique

An id value must be unique within the entire document — no two elements may share the same id. This is the key difference from the class attribute, where one class name can be reused across many elements:

id — one value, one element. Use it for the single thing on the page (a specific section, a particular form field, the main heading).
class — reusable, many elements. Use it for a group that should look or behave the same.

If you duplicate an id, the page still renders, but tools break in subtle ways: getElementById returns only the first match, a #fragment link jumps to the first match, and CSS #id rules apply unpredictably. Validators flag duplicate ids as errors.

Valid id syntax

A few rules keep an id working everywhere:

It must have at least one character.
It must not contain any whitespace (spaces, tabs, line breaks).
It is case-sensitive — main and Main are two different ids.
For broadest compatibility, start the value with a letter (a–z, A–Z) and use only letters, digits, hyphens (-), and underscores (_). Ids that start with a digit work in HTML5 but need escaping in CSS, so a letter-first name is the safe choice.

<!-- Good -->
<div id="main-content"></div>
<section id="pricing"></section>

<!-- Avoid -->
<div id="main content"></div>   <!-- space is invalid -->
<div id="2col"></div>           <!-- digit-first: awkward in CSS -->

Syntax

<tag id="id">...</tag>

Example of the HTML id attribute

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #grey {
        color: grey;
      }
      #purple {
        color: purple;
      }
    </style>
  </head>
  <body>
    <h1>Example of the HTML id attribute</h1>
    <p id="grey">
      It is a grey paragraph.
    </p>
    <p>This is some text.</p>
    <p id="purple">
      It is a purple paragraph.
    </p>
  </body>
</html>

Try it Yourself »

In the example above, CSS targets each paragraph with the #id selector — a hash (#) followed by the id value. Since each id belongs to exactly one element, only that paragraph is styled.

id and class together

id and class often appear on the same element. A common pattern is to use a class for shared styling and an id for the one element you also need to link to or script. In the next example, the heading carries a unique id while several paragraphs share a reusable class:

Example of the HTML id and class attributes

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #green-bg {
        background-color: green;
        color: white;
        padding: 20px;
        text-align: center;
      }
      .text-grey {
        color: grey;
        padding: 5px 15px;
      }
    </style>
  </head>
  <body>
    <h1>Example of the HTML "id" and "class" attributes:</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <h2 id="green-bg">HTML ID attribute</h2>
    <p class="text-grey">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
    </p>
    <p class="text-grey">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book
    </p>
    <p class="text-grey">
      The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

Linking to an id (fragment links and bookmarks)

A link whose href starts with # is a fragment link (also called an anchor or bookmark). It points to the element on the same page whose id matches the text after the #. Clicking it scrolls the page to that element — useful for long pages, tables of contents, and "back to top" links.

<a href="#pricing">Jump to pricing</a>
...
<section id="pricing">...</section>

You can also link to a fragment on another page by combining a URL with the hash: <a href="/learn-html/global-attributes#id">…</a>. Opening a page with a fragment in the address bar scrolls directly to that element.

Example of adding a bookmark

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        line-height: 1.5;
        color: #777777;
      }
      a {
        color: #20c7c1;
        display: inline-block;
        padding: 5px 15px;
      }
      strong {
        display: block;
        color: #1129dc;
      }
    </style>
  </head>
  <body>
    <h1>Example of the HTML "id" and "class" attributes:</h1>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    <a href="#text2">Jump to the text-2</a>
    <a href="#text3">Jump to the text-3</a>
    <p id="text-1">
      <strong>Text number 1</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
    </p>
    <p id="text2">
      <strong>Text number 2</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book
    </p>
    <p id="text3">
      <strong>Text number 3</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      <strong>Text number 4</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      <strong>Text number 5</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

Selecting an id with JavaScript

Because each id is unique, it is the most direct way to reach a single element in script. Two common approaches:

<button id="save-btn">Save</button>

<script>
  // Fastest, dedicated method for ids:
  const btn = document.getElementById("save-btn");

  // querySelector uses the CSS #id selector (note the hash):
  const sameBtn = document.querySelector("#save-btn");

  btn.addEventListener("click", () => {
    console.log("Saved!");
  });
</script>

getElementById takes the id value without the #, while querySelector uses the full CSS #id selector. Both return only the first matching element, which is one more reason to keep ids unique.

Forms and accessibility

Ids are how elements refer to each other, which makes them central to accessible forms and screen-reader support:

<label for="…"> connects a label to a form control whose id matches. Clicking the label then focuses the input, and assistive technology announces the label when the field is focused.
aria-labelledby="…" names an element using the text of another element referenced by its id.
aria-describedby="…" points to an element (by id) that gives extra help or error text.
Skip links — a "Skip to content" link (href="#main") targets the id of the main region so keyboard users can bypass navigation.

<label for="email">Email address</label>
<input type="email" id="email" aria-describedby="email-help">
<p id="email-help">We'll never share your email.</p>

Here for and aria-describedby both reference ids, so the browser knows the label, field, and help text belong together.

A note on CSS specificity

The CSS #id selector is highly specific — far stronger than a class or element selector. That power is also a trap: rules written with ids are hard to override and lead to "specificity wars" where you pile on more selectors (or !important) to win. For reusable styling, prefer classes; reserve #id selectors for genuinely one-off cases. For a deeper look at choosing between them in stylesheets, see CSS id and class.

Practice

Which statement about the HTML 'id' attribute is correct?

An 'id' value must be unique within the document; no two elements may share it.The same 'id' value can be reused on as many elements as you like.An 'id' value may contain spaces to separate words.In CSS you select an element by its 'id' using a dot, like .myId.