Prev Next

HTML Links - Link Bookmarks

Link bookmarks (also known as anchor links) let users jump directly to a specific part of a page. By assigning an id to an element and linking to "#idname", you can create shortcuts that improve navigation and user experience. Bookmarks are especially useful on longer pages or documentation sections.

Key Topics

Creating Bookmarks

Example: Assigning an id to an element and linking to it with #.

<h2 id="section1">Section 1</h2>
<a href="#section1">Jump to Section 1</a>

Page with Bookmarks

This example shows how bookmarks can create internal navigation within a single page. A full code example is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Bookmarks Example</title>
</head>
<body>
    <h1>Page Bookmarks</h1>
    <p><a href="#intro">Go to Introduction</a></p>
    <p><a href="#conclusion">Go to Conclusion</a></p>

    <h2 id="intro">Introduction</h2>
    <p>This is the introduction section of the page.</p>

    <h2 id="conclusion">Conclusion</h2>
    <p>This is the conclusion section of the page.</p>
</body>
</html>

Explanation: By linking to #intro or #conclusion, users can jump directly to those sections. Bookmarks enhance user experience by reducing scrolling and making navigation more direct.

Bookmarks in Lists

This demonstration integrates bookmarks within a list to quickly jump to specific topics on the same page. A full code sample is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List Bookmarks</title>
</head>
<body>
    <h1>Topics</h1>
    <ul>
        <li><a href="#topic1">Topic 1</a></li>
        <li><a href="#topic2">Topic 2</a></li>
        <li><a href="#topic3">Topic 3</a></li>
    </ul>

    <h2 id="topic1">Topic 1</h2>
    <p>Details about topic 1.</p>

    <h2 id="topic2">Topic 2</h2>
    <p>Details about topic 2.</p>

    <h2 id="topic3">Topic 3</h2>
    <p>Details about topic 3.</p>
</body>
</html>

Explanation: Linking from a list to corresponding sections on the page provides a quick reference for users. This method is particularly helpful in documentation, FAQs, or lengthy articles.

Key Takeaways

  • Bookmarks allow direct navigation to specific sections within the same page.
  • Use the id attribute to create a target and link to it with #idname.
  • Bookmarks reduce scrolling and improve user experience, especially on long pages.
  • Integrate bookmarks into lists or menus for organized internal navigation.
  • Proper use of bookmarks can make content more accessible and easier to consume.
Prev Next