HTML Id

Classes gave you stickers many elements can share. An id is different: it names one element on the page — a unique door label for bookmarks, a single CSS hook, or a script target. If two elements claim the same id, browsers and assistive tools get confused. Keep class for reusable looks; reach for id when uniqueness matters.

Unique names and why they matter

Fragment links, “skip to content” patterns, and document.getElementById all assume one match. Duplicate ids may appear to “work” in a quick click test and still break accessibility tooling or later scripts. Treat each id like a primary key for that page: invent it once, attach it once, and link to it with a hash in the URL — not inside the attribute value.

Direct answer

Write id="faq" on exactly one element. Link to it from higher on the page with href="#faq". In CSS, select that element with #faq. Do not reuse the same id on two elements. Do not write id="#faq" — the # belongs in href and in CSS selectors, not in the HTML attribute value. Prefer class when many paragraphs should share one tip style.

Fragment link to a unique heading

A classic beginner pattern: a jump link near the top and a heading lower on the page that owns the matching id. Clicking the link scrolls to that heading.

Reading the fragment sample

• href="#faq" points at the fragment named faq
• id="faq" lives on exactly one heading
• The bare name is in the attribute; the # is only in the link
• Change the label text freely; keep the id token matching the href
• If the jump fails, check spelling and confirm the id was not duplicated
• This is the same idea as bookmarks/fragments you may have seen in the Links module — now tied explicitly to id

Unique CSS hook with #id

Sometimes one panel needs a one-off highlight that should not become a shared class. An id plus a #name rule targets that single box. Use this sparingly — most visual systems still prefer classes so themes stay reusable.

Reading the unique-style sample

• Only this div has id="promo"
• #promo in CSS means that exact element
• Padding and border apply to the unique panel
• If you copy the panel twice, give the copy a new id or switch both to a shared class
• Do not put # inside id="…" — keep # in the stylesheet selector
• Mixing class="card" with id="promo" on the same element is fine when you need both shared and unique hooks

Choosing id or class

Ask: “Will more than one element need this label?” If yes, use class. If you need a single bookmark target or a script handle for one node, use id. Avoid decorating every reusable tip paragraph with its own id — that pattern fights the uniqueness rule and clutters the document.

Practice in your editor

1. Give a heading a unique id (for example steps).
2. Add a link higher on the page with href="#steps" and click to jump.
3. Confirm that id appears only once in the file.
4. Optionally style that heading with #steps in a <style> block.
5. Temporarily duplicate the id on another element, notice the confusion risk, then remove the duplicate.
6. Restyle two tip paragraphs with a shared class instead of two ids.
7. Write one sentence contrasting # in href/CSS with the bare name in the HTML attribute.
8. Optional: combine class="card" and id="promo" on one box from the Div lesson.

Easy mistakes

• Two elements with the same id
• Putting # inside the HTML id attribute value
• Using id for every reusable style (prefer class)
• Forgetting the # in href so the jump becomes a normal path request
• Choosing ids that start with a digit or contain spaces
• Copy-pasting demo markup until three “unique” panels share one id

Summary

• id names one element per page for bookmarks and unique hooks
• Fragment links use href="#name"; CSS uses #name
• The HTML attribute holds the bare name — no leading #
• Prefer class for shared looks; reserve id for uniqueness
• Never duplicate an id on the same page
• Next sessions build on these hooks inside larger page structure