HTML Bookmarks

Link Titles & Targets changed how a link opens. Bookmarks (fragment links) change where on a page you land. Long lessons, FAQs, and documentation often need a jump to “Pricing,” “FAQ,” or “Back to top” without loading a brand-new document. That pattern pairs a unique id on the destination with an href that starts with #.

What an in-page bookmark is

A fragment identifier is the part of a URL after #. In HTML you create the landing spot by giving an element an id. Then any link whose href is #that-id asks the browser to scroll to the first matching id on the page (or on the page named before the # if you include a path).

Direct answer

1. Give the destination an id, for example <h2 id="pricing">.
2. Link with href="#pricing".
   The # means “find this id.” Ids must be unique on the page. Prefer short names without spaces: pricing, not Our Pricing!!.

On-page table of contents

A mini nav at the top of a long page is the classic beginner demo: fragment links above, matching ids on headings below, plus a return link.

Reading the on-page sample

• #intro and #pricing are fragment links, not separate files
• Each heading’s id must match the fragment after #
• The nav can sit anywhere; top-of-page TOCs are common for long content
• “Back to intro” shows bookmarks work downward and upward on the same document

Linking to a section on another page

You can combine a relative (or absolute) path with a fragment. The browser loads the page, then jumps to the id if it exists.

When to use path#id

• Same-page jumps: #pricing is enough
• Another HTML file in your project: guide.html#pricing
• External docs you trust: a full URL ending in #section-name when that site exposes stable ids
  If the id is missing on the destination page, the browser usually opens the page at the top and ignores the unknown fragment.

Id naming habits

• One id value per page — never duplicate
• Start with a letter when possible; avoid spaces and odd punctuation
• Use hyphens for multi-word names: getting-started
• Keep names stable if other pages will deep-link to them
  Ids are for machines and URLs; visible heading text can stay human-friendly and different from the id string.

Bookmarks vs browser “bookmarks”

People also say “bookmark” for saving a page in the browser’s favorites menu. This lesson means in-page fragment links. Browser favorites use the document URL (and sometimes a fragment if you copied one). Same word, different everyday jobs — keep the HTML meaning clear when you teach others.

Accessibility and UX notes

Jump links help keyboard and screen-reader users move through long pages when destinations are real landmarks (headings, sections). Do not spam dozens of empty ids. Make sure the target is visible after the jump — sticky headers can cover headings later when you learn CSS; for now, verify the correct section appears.

Practice in your editor

1. Create two headings with different id values.
2. Above them, add fragment links using href="#…".
3. Click each link and confirm the page jumps to the matching heading.
4. Add a “Back to top” link pointing to an id on your first heading or a top landmark.
5. From a second file, link with other.html#intro and confirm the cross-page jump.
6. Temporarily duplicate an id, observe confusion, then fix uniqueness.

Easy mistakes

• Using the same id twice on one page
• Forgetting the # in href so the browser looks for a filename instead
• Putting spaces or odd symbols in ids
• Linking to an id that does not exist
• Confusing fragment bookmarks with target="_blank" (different jobs)
• Expecting #pricing alone to open a different file without a path

Summary

• Same-page bookmarks use id plus href="#id"
• Ids must be unique, short, and space-free
• Great for long pages and mini tables of contents
• Use page.html#id to jump into a section on another page
• Missing fragments usually fail quietly by staying at the top