HTML Bookmarks

HTML bookmarks (also called anchor links or jump links) allow users to click a link and jump directly to a specific section within a page — without loading a new page.

How Bookmarks Work

Creating a bookmark requires two steps:

Mark the target section with an id attribute
Create a link to that id using #id in the href

Step 1 — Add an id to the Target

Add an id attribute to the element you want to jump to:

<h2 id="section-two">Section Two</h2>
<h2 id="contact">Contact Us</h2>
<div id="footer-section">...</div>

Note: The id must be unique on the page. No two elements should share the same id. Use lowercase and hyphens for id names (e.g., id="my-section").

Step 2 — Link to the id

Create a link using # followed by the id value:

<a href="#section-two">Jump to Section Two</a>
<a href="#contact">Go to Contact</a>

Full Example — Same Page

<!-- Navigation links at the top -->
<a href="#intro">Introduction</a> |
<a href="#features">Features</a> |
<a href="#contact">Contact</a>

<hr>

<!-- Target sections -->
<h2 id="intro">Introduction</h2>
<p>This is the introduction section.</p>

<h2 id="features">Features</h2>
<p>This is the features section.</p>

<h2 id="contact">Contact</h2>
<p>This is the contact section.</p>

Browser output:

Introduction | Features | Contact

Introduction

This is the introduction section.

Features

This is the features section.

Contact

This is the contact section.

Link to a Section on Another Page

You can also link to a specific section on a different page by combining the page URL with the #id:

<!-- From page1.php, link to a section on page2.php -->
<a href="page2.php#contact">Go to Contact on Page 2</a>

<!-- With absolute URL -->
<a href="https://www.example.com/about.php#team">Meet the Team</a>

Smooth Scrolling

By default, clicking a bookmark link jumps instantly to the section. You can enable smooth scrolling with CSS:

html {
    scroll-behavior: smooth;
}

After adding this, clicking any #id link will smoothly animate the scroll instead of jumping.

Tip: Bookmarks are very useful for long pages — like documentation, FAQs, and articles. Add a "Back to top" link at the bottom of each section for better UX.

Back to Top Link

Add an id to the top of your page, then link back to it:

<!-- At the very top -->
<html id="top">

<!-- ...long content... -->

<!-- At the bottom -->
<a href="#top">↑ Back to top</a>

« Previous Lesson Next Lesson »