HTML Bookmarks

A bookmark in HTML is a link that jumps to a specific spot on a page instead of loading a whole new document. You’ve seen this on long articles or documentation pages: clicking “Back to top” or a table-of-contents entry instantly scrolls you to the right section. Bookmarks are built from two ordinary pieces of HTML working together: an id attribute that marks a target, and an <a> element whose href points at that target with a # prefix. No JavaScript is required — the browser handles the scrolling natively.

Overview: How Bookmarks Work

Every HTML element can carry a unique id attribute. An id is a name tag for that exact element in the document, and it must be unique within the page — no two elements may share the same id value. Once an element has an id, it becomes an addressable target. You can link to it from anywhere by writing a URL fragment: the character # followed by the id value.

When the browser parses the page, it builds the DOM tree as usual, and every element with an id is registered internally so the browser can look it up instantly. When a link with a #fragment is activated (or when a page loads with a fragment already in the URL, like page.html#section2), the browser searches the DOM for an element whose id matches the fragment. If found, the browser scrolls the viewport so that element’s top edge aligns near the top of the window, and — for keyboard and accessibility purposes — treats it as the current “target” of the page (matchable in CSS with the :target pseudo-class, though that’s a CSS topic).

Importantly, a bookmark link is still just an anchor element (<a>) — the same element used for links to other pages. The only difference is what the href points to: a fragment (#id) instead of a filename or full URL. This means bookmark links are keyboard-accessible, appear in the browser’s link semantics, and can be styled exactly like any other link.

Historically, before the id attribute was standard, developers used <a name="section2"></a> to mark a target. The name attribute on <a> for this purpose is obsolete in modern HTML — always use id on the element you actually want to target (a heading, a div, a section) instead of adding an empty anchor.

Syntax

<!-- 1. Mark the target with an id -->
<h2 id="section-name">Section Title</h2>

<!-- 2. Link to it with a # + the id -->
<a href="#section-name">Jump to Section</a>
Part Purpose
id="section-name" Marks an element as a unique, addressable target on the page. Must be unique per document.
href="#section-name" Links to the element whose id matches section-name, on the current page.
href="page.html#section-name" Links to a section on a different page — loads page.html, then jumps to the target.
href="#top" or href="#" A bare # or an id like top placed on the page’s first element scrolls back to the very top of the page.

Examples

Example 1: A Simple Same-Page Bookmark

<a href="#contact">Jump to Contact Info</a>

<h2 id="contact">Contact Info</h2>
<p>Email us at example@example.com.</p>

Result: The page shows the text “Jump to Contact Info” styled as a link. Clicking it does not load a new page — the browser instantly scrolls down (or up) so the “Contact Info” heading sits at the top of the viewport. The URL in the address bar updates to include #contact.

This is the minimal pattern: one id, one link. The link can appear anywhere before or after the target — order in the source doesn’t matter, only that the id exists somewhere in the document.

Example 2: A Table of Contents for a Long Article

<nav>
  <h2>Table of Contents</h2>
  <ul>
    <li><a href="#intro">Introduction</a></li>
    <li><a href="#history">History</a></li>
    <li><a href="#conclusion">Conclusion</a></li>
  </ul>
</nav>

<h2 id="intro">Introduction</h2>
<p>This article covers the basics.</p>

<h2 id="history">History</h2>
<p>A look back at how this topic developed.</p>

<h2 id="conclusion">Conclusion</h2>
<p>Final thoughts and next steps.</p>

Result: A navigation block renders at the top of the page with a bulleted list of three links: “Introduction”, “History”, and “Conclusion”. Clicking any one of them jumps directly to the matching heading further down the same page, skipping past whatever content sits between the table of contents and the target section.

This is the most common real-world use of bookmarks: a jump-to-section menu at the top of a documentation page or long article, letting readers skip the scroll.

Example 3: Linking to a Section on a Different Page, Plus a “Back to Top” Link

<!-- Link from index.html to a section on guide.html -->
<a href="guide.html#installation">Read the Installation Steps</a>

<!-- Inside guide.html -->
<h2 id="top">User Guide</h2>
<p>...long content...</p>

<h2 id="installation">Installation</h2>
<p>Steps to install the software.</p>

<p><a href="#top">Back to top</a></p>

Result: Clicking “Read the Installation Steps” on the first page navigates the browser to guide.html and, once that page loads, scrolls straight to the “Installation” heading rather than starting at the top. Inside guide.html, the “Back to top” link scrolls the viewport back up to the “User Guide” heading, which carries id="top".

This demonstrates that bookmarks work across pages too — the fragment is simply appended after the filename. The browser loads the full destination page first, then performs the same lookup-and-scroll behavior described above.

How It Works Step by Step

  1. The browser parses the HTML and builds the DOM tree, recording every element’s id attribute in an internal index as it goes.
  2. When a link with a #fragment href is clicked (or a URL with a fragment is loaded), the browser first navigates to the target document if one is specified before the #.
  3. Once the target document’s DOM is available, the browser looks up the fragment identifier against its index of id values.
  4. If a match is found, the browser scrolls the viewport so the matched element is positioned near the top, and marks that element as the page’s current target (accessible via CSS :target).
  5. If no element has a matching id, the browser does nothing extra — it simply loads the page (or stays on the current one) without any scroll adjustment.

Common Mistakes

Mistake 1: Duplicate id values

<h2 id="section">First Section</h2>
<p>...</p>
<h2 id="section">Second Section</h2>

An id must be unique per page. With two elements sharing id="section", a link to #section is only guaranteed to reach the first one in the DOM, and validators will flag the duplicate. Fix it by giving each element a distinct, descriptive id:

<h2 id="section-first">First Section</h2>
<p>...</p>
<h2 id="section-second">Second Section</h2>

Mistake 2: Forgetting the # in the href

<a href="contact">Jump to Contact</a>
<h2 id="contact">Contact</h2>

Without the leading #, the browser treats "contact" as a relative file path and tries to load a page named contact instead of jumping to the element with that id. The fix is simply to prefix the value with #:

<a href="#contact">Jump to Contact</a>
<h2 id="contact">Contact</h2>

Mistake 3: ids with spaces or invalid leading characters

An id value cannot contain spaces, and while modern HTML permits most characters, ids that start with a digit or contain spaces cause unreliable matching in older tooling and CSS selectors. Prefer lowercase letters, digits, and hyphens, starting with a letter — for example id="section-2" rather than id="2nd section".

Best Practices

  • Use descriptive, kebab-case id values (id="pricing-table") instead of vague ones (id="s1") so the fragment URL is meaningful and stable if content is reordered.
  • Put the id directly on the heading or section element you want to target, rather than adding an empty wrapping element just to hold the id.
  • Provide a “back to top” bookmark link on long pages so users aren’t forced to scroll manually after jumping deep into content.
  • Keep id values unique across the entire document — check for duplicates especially when content is generated or copy-pasted between sections.
  • Remember bookmark links are real links: they should be visually distinguishable as clickable, just like any other <a> element, for accessibility and usability.
  • When linking to a section on another page, double check the target page’s id spelling exactly — a typo silently fails by just loading the page without scrolling, with no error shown.

Practice Exercises

  1. Build a single HTML page with four <h2> sections (e.g. “Overview”, “Features”, “Pricing”, “FAQ”), each with a unique id. Above them, add a table-of-contents list of bookmark links that jump to each section.
  2. Add a “Back to top” bookmark link after each section that returns the reader to the top of the page. (Hint: give your very first heading or a wrapping element an id="top".)
  3. Create two separate HTML files. From the first file, add a link that opens the second file and jumps straight to a specific section within it using file2.html#target-id.

Summary

  • A bookmark links to a specific element on a page using the element’s id attribute.
  • Mark a target with id="name" on any element; link to it with href="#name".
  • id values must be unique within the document and cannot contain spaces.
  • Bookmark links can point to a section on the same page or, by prefixing the filename, to a section on a different page (page.html#name).
  • Bookmarks are ordinary <a> elements — no JavaScript is needed for the jump-and-scroll behavior.
  • A common pattern is a table of contents at the top of a long page paired with “back to top” links after each section.