HTML ID

HTML ID: Targeting Unique Elements and Page Bookmarks

The HTML id attribute gives a single element a unique identifier within the entire document. Because each id must appear only once per page, developers rely on it for fast JavaScript lookups, accessible form label pairing, and direct #hash URL bookmarks.

Where the id Attribute Shines

Three everyday tasks depend directly on unique id values:

1. Fragment Jump Links: Linking to href="#pricing" scrolls visitors straight to the element whose id is pricing, even from an external URL like /features#pricing.
2. Form Accessibility: Pairing a label element's for="email" attribute with an input's id="email" lets users click the label text to focus the field.
3. JavaScript DOM Hooks: Calling document.getElementById('checkout-form') fetches that exact element immediately.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML ID Attribute Demo</title>
    <style>
        #hero-banner { background: #1e293b; color: #f8fafc; padding: 20px; border-radius: 8px; }
    </style>
</head>
<body>
    <nav><a href="#contact-section">Jump to Contact</a></nav>

    <section id="hero-banner">
        <h2>Unique Hero Section</h2>
        <p>Styled once via the #hero-banner CSS ID selector.</p>
    </section>

    <section id="contact-section">
        <label for="user-email">Work Email</label>
        <input id="user-email" type="email" placeholder="[email protected]">
    </section>
</body>
</html>

CSS Specificity Warning

In CSS, an ID selector (#header) carries far higher specificity than a class selector (.header). Overusing ID selectors in stylesheets makes overriding styles in responsive breakpoints frustrating, so prefer classes for visual styling and save id for landmarks, anchors, forms, and JavaScript targets.

Common Mistakes to Avoid

• Repeating the same id twice on one page: Duplicate IDs break getElementById(), confuse screen reader aria-labelledby links, and cause jump links to hit only the first match.
• Including spaces inside an id: An id value must contain zero whitespace. Use hyphens like order-summary instead.
• Writing # inside the HTML attribute: Write id="top" in HTML, and only add the hash symbol in CSS (#top) or links (href="#top").

Frequently Asked Questions

What is the main difference between class and id in HTML?

An id must be unique to a single element on the page, whereas a class can be reused across any number of elements.

Does an HTML id have to start with a letter?

In HTML5 any non-empty string without spaces is technically valid, though starting with a letter keeps CSS selectors clean without escaping.