HTML — Id

What ids are

The id attribute gives an element a unique name — exactly one element per page may hold it:

<h2 id="contact">Contact Us</h2>
<footer id="site-footer">© 2024 Acme</footer>

#contact {
    border-top: 3px solid teal;
}

CSS selects ids with a hash prefix:

id="contact"   →   #contact { ... }

Rules

1. Unique — never reuse the same id on a second element
2. No spaces — start with a letter; letters, digits, hyphens, underscores
3. Case-sensitive in CSS/JS (#Header ≠ #header)

<div id="first-box">OK</div>
<div id="first box">BROKEN — space splits it into two words</div>

What ids are for

1. Page-anchor jumps (the biggest everyday use)

<nav>
    <a href="#intro">Introduction</a>
    <a href="#setup">Setup</a>
</nav>

<h2 id="intro">Introduction</h2>
<p>...</p>

<h2 id="setup">Setup</h2>
<p>...</p>

Clicking the nav link scrolls instantly to the matching id. This powers every table of contents and documentation sidebar on the web.

2. JavaScript targeting

const form = document.getElementById("signup-form");
form.addEventListener("submit", validate);

getElementById is the fastest, oldest element lookup — unique ids make "find this exact element" unambiguous.

3. Label–input pairing (forms)

<label for="email">Email address</label>
<input type="email" id="email">

The for attribute matches the input's id. Clicking the label focuses the field, and screen readers announce them together — accessibility you get almost free.

4. Unique styling

#site-footer {
    background: #222;
    color: #eee;
    padding: 24px;
}

Works fine — but note that styling is usually better done with classes, since designs rarely stay "one of a kind" forever.

id vs class — head to head

	class	id
Reusable	Yes, unlimited	No, one element
CSS selector	.name	#name
Also used for	Styling groups, JS sets	Anchors, labels, getElementById
Specificity in CSS	Low	Very high (beats classes)

That last row matters: an id selector is so specific it's hard to override later, which is why professionals style with classes and reserve ids for behavior/anchors.

<!-- Common pattern: both at once -->
<div class="alert urgent" id="quota-alert">
    Storage quota exceeded.
</div>

Classes handle looks; id handles identity.

Mini Practice

Build faq.html:

1. Five questions as <h3> elements with ids (q1…q5)
2. A top menu linking to each question via #q1…#q5
3. A "Back to top" link targeting #top placed on the page heading
4. One styled footer using #site-footer
5. Add a <label for> + <input id> pair and click the label to test focus

Next: iframes →