Home / HTML / Links / Bookmarks

HTML Link Bookmarks

What are Link Bookmarks?

Link bookmarks (also called anchor links or fragment identifiers) allow you to link to a specific section on the same page or another page. They use the id attribute to create targets and the href attribute with a hash (#) to link to those targets.

Creating a Bookmark

To create a bookmark, first assign an id attribute to an element:

Example

<h2 id="section1">Section 1</h2>
<p>This is section 1 content.</p>

Linking to a Bookmark

To link to a bookmark, use the href attribute with a hash (#) followed by the id:

Example

<a href="#section1">Go to Section 1</a>

<h2 id="section1">Section 1</h2>
<p>This is section 1 content.</p>

Same-Page Navigation

Create a table of contents that links to sections on the same page:

Example

<h1>Table of Contents</h1>
<ul>
    <li><a href="#intro">Introduction</a></li>
    <li><a href="#chapter1">Chapter 1</a></li>
    <li><a href="#chapter2">Chapter 2</a></li>
    <li><a href="#conclusion">Conclusion</a></li>
</ul>

<h2 id="intro">Introduction</h2>
<p>Introduction content...</p>

<h2 id="chapter1">Chapter 1</h2>
<p>Chapter 1 content...</p>

<h2 id="chapter2">Chapter 2</h2>
<p>Chapter 2 content...</p>

<h2 id="conclusion">Conclusion</h2>
<p>Conclusion content...</p>

Linking to Bookmarks on Another Page

You can link to a bookmark on a different page by combining the page URL with the bookmark:

Example

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

<!-- Link to a bookmark on the same domain -->
<a href="/tutorials/html/intro.html#getting-started">Getting Started</a>

<!-- Link to a bookmark on another website -->
<a href="https://example.com/page.html#section1">External Bookmark</a>

"Back to Top" Links

Create a "Back to Top" link that scrolls to the top of the page:

Example

<h1 id="top">Page Title</h1>
<p>Page content...</p>
<br><br><br><br><br><br><br><br><br><br>
<p>More content...</p>
<a href="#top">Back to Top</a>

Special Bookmark: Top of Page

You can link to the top of a page using #top or simply #:

Example

<a href="#top">Go to Top</a>
<!-- Or simply -->
<a href="#">Go to Top</a>

Multiple Bookmarks Example

Example

<nav>
    <a href="#home">Home</a> |
    <a href="#about">About</a> |
    <a href="#services">Services</a> |
    <a href="#contact">Contact</a>
</nav>

<section id="home">
    <h2>Home Section</h2>
    <p>Home content...</p>
</section>

<section id="about">
    <h2>About Section</h2>
    <p>About content...</p>
</section>

<section id="services">
    <h2>Services Section</h2>
    <p>Services content...</p>
</section>

<section id="contact">
    <h2>Contact Section</h2>
    <p>Contact content...</p>
</section>

Best Practices

Use descriptive IDs: Use meaningful id names like #introduction instead of #section1
IDs must be unique: Each id can only be used once per page
Valid ID characters: IDs can contain letters, numbers, hyphens, and underscores, but must start with a letter
Case sensitive: IDs are case-sensitive, so #Section1 is different from #section1
Use for navigation: Bookmarks are great for table of contents and navigation menus
Smooth scrolling: You can add CSS for smooth scrolling: html { scroll-behavior: smooth; }

Smooth Scrolling

Add smooth scrolling behavior to make bookmark navigation smoother:

Example

<style>
    html {
        scroll-behavior: smooth;
    }
</style>
<a href="#section1">Go to Section 1 (smooth scroll)</a>
<br><br><br><br><br><br><br><br><br><br>
<h2 id="section1">Section 1</h2>
<p>This section scrolls into view smoothly.</p>

← Link Colors HTML Images →