HTML Tutorial
HTML Id
id is unique on a page. Use it for jump links, form labels, and one-off styles.
A unique name
The id attribute gives one element a name that no other element on that page should share. Browsers, CSS, JavaScript, and form labels all use that name as a pointer to a single target.
Write it without a hash in the HTML: id="top". In CSS and in jump links, put a hash in front:#top.
id vs class
Use a class when many elements should share a look or a role. Use an id when you mean this one element: the top of the page, a specific heading, one email field.
| id | class | |
|---|---|---|
| How many of that name | One per page | Many |
| CSS | #menu | .card |
| Jump link | <a href="#menu"> | Not for this |
| Label pairing | for="email" matches id="email" | Not for this |
| Several on one tag | One id | Many classes |
An element can have both: a unique id and one or more classes. The id is the pointer. The class is the group style.
One-off styles with #id
CSS selects an id with a hash. That rule is more specific than a class rule, so it is easy to overuse. Prefer a class for anything you might reuse. Keep id styles for a true one-off, such as a page banner.
Example
<style>
#banner {
background: #0f172a;
color: #fff;
padding: 1rem;
}
</style>
<header id="banner">
<h1>Harbor Cafe</h1>
</header>
<p>The banner is unique. Menu cards still use classes.</p>Jump links
An anchor whose href starts with # scrolls to the element with that id on the same page. This is how “Back to top” and in-page tables of contents work.
Example
<p><a href="#top">Back to top</a></p>
<h1 id="top">Harbor Cafe</h1>
<p>Scroll down a long menu, then use the link to return here.</p>
<h2 id="drinks">Drinks</h2>
<p><a href="#drinks">Jump to drinks</a></p>
<p>Espresso, tea, still water.</p>The value after # must match the id exactly, including case. There is no extra hash in the attribute: id="top", not id="#top".
Try the jump links in /html/try. If the preview is short, add extra paragraphs so you can see the scroll.
Labels match an input id
A <label for="..."> is tied to the input whose id has the same value. Clicking the label then focuses that field. Screen readers announce the label with the control. This pairing needs a unique id on the input.
Example
<form>
<p>
<label for="email">Email</label>
<input id="email" type="email" name="email">
</p>
<p>
<label for="party">Party size</label>
<input id="party" type="number" name="party" min="1">
</p>
<button type="submit">Book a table</button>
</form>for="email" matches id="email". The name attribute is what gets sent with the form. Do not confuse name with id: labels look at id.
One id per page
Duplicate ids are invalid HTML. Jump links, labels, and document.getElementById will hit the first match and ignore the rest — or behave inconsistently. If two fields both need a similar name, give each a unique id (email and email-confirm) and share a class for styling.
Never copy-paste the same id="email" onto a second input. Two labels cannot honestly point at two fields that claim the same id.
Rules for id values
- Must be unique on that page.
- Should start with a letter. Use letters, digits, hyphens, and underscores.
- No spaces.
id="back to top"is not a valid pointer. - Case-sensitive in matching.
Topis nottop.
You do not need an id on every element. Add one when something must be reachable: a heading in a long page, a form field, a skip link target. Next: embedding another page with iframe.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Physics
Jump to the method
id is unique on the page. A second id="method" is invalid. href="#method" is the jump. Labels on forms also point at ids.
Use id for targets and one-off hooks. Use class for anything that might appear twice.
Example
<p><a href="#method">Skip to method</a></p>
<h2 id="method">Method</h2>
<p>Drop from rest. Record s each second.</p>Biology
A unique patient block
A chart might have id="patient-17". That is one person. A class="vitals" can sit on every chart. Mixing those jobs is how scripts update the wrong row.
Example
<section id="patient-17">
<h2>Patient 17</h2>
<p>36.8 °C · 72 bpm</p>
</section>