Bookmark Links

Bookmark links (also called anchor links or fragment links) navigate to a specific section within the same page or another page. They use the #id syntax in the href attribute to jump to any element that has a matching id attribute.

Creating and Linking to Anchors

First, add a unique id to the target element. Then create a link with href="#that-id". You can also link to a section on another page by combining the URL with the fragment: href="page.html#section-id". A "Back to top" link using href="#" scrolls to the very top of the page.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bookmark Links</title>
  <style>
    section { min-height: 400px; padding: 20px; }
    .back-top { display: block; margin-top: 20px; }
  </style>
</head>
<body id="top">
  <nav>
    <a href="#intro">Introduction</a> |
    <a href="#details">Details</a> |
    <a href="#contact">Contact</a>
  </nav>

  <section id="intro">
    <h2>Introduction</h2>
    <p>Welcome to this long page...</p>
  </section>

  <section id="details">
    <h2>Details</h2>
    <p>More content here...</p>
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <p>Get in touch...</p>
    <a href="#top" class="back-top">Back to top</a>
  </section>
</body>
</html>

HTML

Full Editor

Pro Tip

Add scroll-behavior: smooth; to the html element in your CSS to get silky smooth scrolling when anchor links are clicked — a single line that significantly improves the user experience.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned