HTML id Attribute and Page Bookmarks

The HTML id attribute gives one element a unique name. Learn the rules for ids, the difference between id and class, how to make page bookmarks with #id links, and how JavaScript uses ids.

What is the id attribute in HTML?

The id attribute gives an element a unique name: a name used only once on the whole page. If a class is like a team badge that many people wear, an id is like a passport number. Only one person has it.

You met ids briefly when you learned to link to a section on the same page. In this lesson you will learn all the rules, the difference from classes, and the three main jobs of an id:

1. Making bookmarks (links that jump to a part of a page).
2. Connecting labels to form fields with for.
3. Letting JavaScript find one specific element.

<h2 id="opening-hours">Opening hours</h2>
<p>Monday to Saturday, 9 am to 5 pm.</p>

Rules for writing a valid id

• Unique: each id value must appear only once on a page. Two elements with id="menu" is an error.
• No spaces: id="opening hours" is wrong. Use a dash: id="opening-hours".
• Case-sensitive: id="Menu" and id="menu" are different.
• At least one character. An empty id="" is not allowed.
• Start with a letter for easy use in CSS and JavaScript. HTML allows ids like 2026-events, but in CSS you would need awkward escaping, so events-2026 is better.
• Make it meaningful: id="contact-form" tells you what it is; id="box7" does not.

Common mistake: Copying a section of HTML and forgetting to change the id. The page still looks fine, but bookmark links and JavaScript only find the first element with that id, and label connections can break. Your validator will flag duplicate ids.

What is the difference between id and class?

This is one of the most common beginner questions.

	id	class
How many per page	One element only	Many elements
How many per element	One id	Many classes
CSS selector	#contact	.card
JavaScript	document.getElementById('contact')	document.querySelectorAll('.card')
Used for bookmarks	Yes, with href="#contact"	No
Used for label for	Yes	No
Typical use	One special thing: a form, a section to jump to	A style shared by many things

An element can have both: <section id="pricing" class="panel">. A good rule: use classes for styling, and use ids for bookmarks, labels and JavaScript. In CSS, an id selector is very strong and beats class rules, which makes ids awkward to override for styling.

How to create page bookmarks with #id links

A bookmark (also called an anchor or fragment link) is a link that jumps to an element on a page. Write href="#" plus the id.

You can link to:

• A section on the same page: href="#faq".
• A section on another page: href="help.html#faq".
• A section on another website: href="https://example.com/guide#install".

When someone clicks, the address bar shows the fragment, like page.html#faq. People can copy and share that address, and the page opens at that exact spot.

A table of contents example

Long pages, like guides and documentation, often start with a table of contents that links to each section.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Beginner's Guide to Houseplants - Green Leaf</title>
  <style>
    html { scroll-behavior: smooth; }
    section { min-height: 80vh; }
  </style>
</head>
<body>
  <h1>Beginner's Guide to Houseplants</h1>

  <nav aria-label="Table of contents">
    <h2>Contents</h2>
    <ol>
      <li><a href="#choosing">Choosing a plant</a></li>
      <li><a href="#watering">Watering</a></li>
      <li><a href="#light">Light</a></li>
      <li><a href="#problems">Common problems</a></li>
    </ol>
  </nav>

  <section id="choosing">
    <h2>Choosing a plant</h2>
    <p>Start with easy plants like the snake plant or pothos.</p>
  </section>

  <section id="watering">
    <h2>Watering</h2>
    <p>Most houseplants die from too much water, not too little.</p>
  </section>

  <section id="light">
    <h2>Light</h2>
    <p>Bright, indirect light suits most plants.</p>
  </section>

  <section id="problems">
    <h2>Common problems</h2>
    <p>Yellow leaves often mean the soil stays wet for too long.</p>
    <p><a href="#top">Back to top</a></p>
  </section>
</body>
</html>

Click any item in the contents list and the page scrolls smoothly to that section; the scroll-behavior: smooth CSS makes it glide instead of jumping. The min-height makes each section tall, so you can see the scrolling. The "Back to top" link uses #top, a special fragment: browsers jump to the top of the page even without an element called "top".

Tip: A fixed header can cover the heading you jump to. In CSS, add scroll-margin-top: 80px; to your sections (use your header's height) so the heading stops just below the header.

Using ids in JavaScript and with labels

Finding an element with JavaScript

Because an id is unique, it is the fastest and clearest way for JavaScript to find one element. document.getElementById('name') takes the id without #; document.querySelector('#name') takes it with #, like CSS.

<p id="greeting">Hello, visitor!</p>
<button id="greet-button" type="button">Say hello properly</button>

<script>
  const greeting = document.getElementById('greeting');
  const button = document.querySelector('#greet-button');

  button.addEventListener('click', () => {
    greeting.textContent = 'Hello, and welcome to Green Leaf!';
  });
</script>

When you click the button, the paragraph text changes to the new greeting. JavaScript found both elements by their ids.

Connecting labels and inputs

In forms, the label's for must match the input's id. Clicking the label then focuses the field, and screen readers announce the label.

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

Practice exercise

Create an FAQ page with five questions. Give each question's section a meaningful id, add a table of contents at the top with links to all five, and add a "Back to top" link at the end. Then add a link on a second page, index.html, that opens the FAQ page directly at the third question.

Hint: the link from the other page looks like href="faq.html#your-id".

Key takeaways

• An id must be unique on the page, contain no spaces, and is case-sensitive.
• Use classes for shared styling and ids for one special element.
• Link to an id with href="#id", or page.html#id for another page.
• JavaScript finds one element with getElementById('id') or querySelector('#id').
• A label's for must match its input's id.