HTML Link Bookmarks Guide

Learn how to create and use bookmarks for in-page navigation

⏱️ Reading time: 0 min•Last updated: 10/7/2025

Introduction to HTML Bookmarks

HTML bookmarks (also called fragment identifiers or anchor links) allow you to create links that jump to specific sections of a webpage. They're essential for:

Creating table of contents navigation
Linking to specific content sections
Improving user experience on long pages
Creating "Back to top" functionality
Building single-page application navigation

This guide covers all aspects of creating and using HTML bookmarks effectively.

Creating Bookmarks

How to create anchor points in your page that can be linked to

<!-- Create a bookmark with id attribute -->
    <h2 id="section1">Section 1</h2>
    <p>Content for section 1...</p><!-- Create a bookmark with id attribute -->
    <h2 id="section1">Section 1</h2>
    <p>Content for section 1...</p>

Usage: Use id attributes on any element to create bookmark targets

Linking to Bookmarks

How to create links that jump to specific sections of a page

<!-- Link to a bookmark on the same page -->
    <a href="#section1">Jump to Section 1</a>

    <!-- Link to a bookmark on another page -->
    <a href="/page.html#section2">Go to Section 2</a><!-- Link to a bookmark on the same page -->
    <a href="#section1">Jump to Section 1</a>

    <!-- Link to a bookmark on another page -->
    <a href="/page.html#section2">Go to Section 2</a>

Usage: Use # followed by the id to link to bookmarks

Create a navigation menu that links to page sections

Accessible navigationSticky positioningSemantic HTML

<!-- Table of Contents -->
    <nav aria-label="Page sections">
    <h2>Contents</h2>
    <ul>
        <li><a href="#intro">Introduction</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    </nav>

    <!-- Bookmarked sections -->
    <section id="intro">
    <h2>Introduction</h2>
    <p>Welcome content...</p>
    </section><!-- Table of Contents -->
    <nav aria-label="Page sections">
    <h2>Contents</h2>
    <ul>
        <li><a href="#intro">Introduction</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    </nav>

    <!-- Bookmarked sections -->
    <section id="intro">
    <h2>Introduction</h2>
    <p>Welcome content...</p>
    </section>

Smooth Scrolling

Add smooth scrolling behavior for better user experience

<!-- No changes needed to your HTML -->
    <a href="#section">Jump to Section</a><!-- No changes needed to your HTML -->
    <a href="#section">Jump to Section</a>

Why this matters: Smooth scrolling makes navigation more pleasant and professional

Back to Top Button

Create a button that returns users to the top of the page

<!-- Back to top button -->
    <button id="back-to-top" aria-label="Back to top">
    <FaArrowUp />
    </button><!-- Back to top button -->
    <button id="back-to-top" aria-label="Back to top">
    <FaArrowUp />
    </button>

Why this matters: Helpful for long pages to improve navigation

URL Hash Detection

Highlight the current section in navigation based on URL hash

<!-- Navigation with active state support -->
    <nav>
    <a href="#section1" class="nav-link">Section 1</a>
    <a href="#section2" class="nav-link">Section 2</a>
    </nav><!-- Navigation with active state support -->
    <nav>
    <a href="#section1" class="nav-link">Section 1</a>
    <a href="#section2" class="nav-link">Section 2</a>
    </nav>

HTML Link Bookmarks Guide

Introduction to HTML Bookmarks

Bookmark Basics

Creating Bookmarks

Linking to Bookmarks

Navigation Examples

Table of Contents

Bookmark Best Practices

Smooth Scrolling

Back to Top Button

Advanced Bookmark Techniques

URL Hash Detection

Bookmarks Playground

Bookmark Examples Preview