← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 15 of 26

HTML Link Bookmarks

A long article or documentation page can be hard to navigate if a reader has to manually scroll to find one specific section. HTML bookmark links solve this by letting you jump straight to a specific point on the page (or even a specific point on a different page) the instant a link is clicked, using an id attribute as the destination marker.

In this page:

  1. Marking a Destination with id
  2. Linking to a Destination on the Same Page
  3. Linking to a Destination on Another Page
  4. Smooth Scrolling to Bookmarks
  5. Combining Bookmarks with Navigation Menus

Marking a Destination with id

Any HTML element can become a bookmark destination by giving it a unique id attribute -- this does not need to be a special anchor tag; a heading, a div, or a paragraph can all serve as a jump target as long as its id is unique on the page.

Note: Give major sections descriptive, readable ids (like id="pricing") instead of generic ones (like id="section3") for easier maintenance.

Warning: Every id value on a page must be unique; reusing the same id on two elements makes bookmark navigation behave unpredictably.

Example: Marking a Destination with id

markup 
<h2 id="pricing">Pricing</h2>

Linking to a Destination on the Same Page

A link jumps to a destination on the current page by setting its href to a # symbol followed by the target id -- href="#pricing" scrolls the browser directly to the element with id="pricing", without ever leaving the current page or reloading it.

Note: Add these same-page bookmark links to a "table of contents" at the top of long articles so readers can jump straight to a section.

Warning: Omitting the # before the id turns the href into a request for a different page entirely named after the id, which will 404.

Example: Linking to a Destination on the Same Page

markup 
<a href="#pricing">Jump to Pricing</a>
<h2 id="pricing">Pricing</h2>

Linking to a Destination on Another Page

A bookmark link can also point to a section of a completely different page by combining a normal file path or URL with the #id fragment -- href="article.html#conclusion" loads article.html and then immediately scrolls to the element with id="conclusion".

Note: Cross-page bookmark links are especially useful for linking directly to a specific FAQ answer or documentation heading from an external site.

Warning: If the target id does not exist on the destination page, the browser simply loads the page normally at the top, with no error shown.

Example: Linking to a Destination on Another Page

markup 
<a href="article.html#conclusion">Read the conclusion</a>

Smooth Scrolling to Bookmarks

By default, bookmark navigation snaps instantly to the destination with no animation. Adding scroll-behavior: smooth to the html element makes the browser animate the scroll smoothly instead, giving readers a clearer sense of moving through the page rather than teleporting.

Note: Apply scroll-behavior: smooth globally on the html selector once, rather than on individual links, so all bookmark jumps animate consistently.

Warning: Smooth scrolling can feel sluggish on very long pages with a large scroll distance, so test the perceived speed on your actual content length.

Example: Smooth Scrolling to Bookmarks

markup 
<style>
  html {
    scroll-behavior: smooth;
  }
</style>
<a href="#pricing">Jump to Pricing</a>
<h2 id="pricing">Pricing</h2>

Combining Bookmarks with Navigation Menus

Bookmark links are frequently combined into a sticky navigation menu at the top of a page, letting visitors jump between major sections (like Home, Features, Pricing, Contact) without ever triggering a full page reload, which keeps the browsing experience fast and app-like.

Note: Highlight the current section's nav link as active using JavaScript that listens for scroll position, for a more polished single-page navigation feel.

Warning: A sticky nav bar can visually cover the top of a section right after a bookmark jump; pair it with scroll-margin-top on the section to compensate.

Example: Combining Bookmarks with Navigation Menus

markup 
<nav>
  <a href="#home">Home</a>
  <a href="#features">Features</a>
  <a href="#pricing">Pricing</a>
</nav>
Common Mistakes
  1. Forgetting the # symbol before the id in the href, which turns the bookmark link into a request for a nonexistent separate page.
  2. Using duplicate id values on the same page, which is invalid HTML and makes bookmark link behavior unreliable since ids must be unique.
  3. Adding spaces or special characters to an id value, which can break the href="#id" link from matching it correctly.
Chapter Summary
  • A bookmark destination is any element with a unique id attribute, matched by a link's href="#id" value.
  • Bookmark links can jump within the current page or to a specific section of a different page entirely.
  • scroll-behavior: smooth on the html element animates bookmark jumps instead of snapping instantly to the destination.
Browser Support

HTML id-based bookmark links are supported in every browser and have worked since the earliest versions of HTML.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Link Colors Next Lesson → HTML Images

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.