Using IDs for Bookmarks in HTML

by

HTML IDs can be used to create bookmarks that allow users to jump directly to a specific section of a webpage. This is especially useful for long articles, tutorials, documentation pages, and frequently asked questions.

HTML bookmarks work by assigning an id to a target element and creating a link that points to that ID. When users click the link, the browser navigates to the corresponding section without loading a separate webpage.

What Are HTML Bookmarks?

An HTML bookmark is a link that takes users to a specific location within a webpage. It uses the id attribute to identify the destination and the href attribute to reference it.

Here is the basic syntax:

<a href="#contact">Go to Contact</a>

<h2 id="contact">Contact Information</h2>

In this example, clicking the link moves the browser to the heading with the contact ID.

To understand how IDs identify individual elements, explore HTML IDs.

HTML Bookmark Example

The following example demonstrates how to create multiple bookmarks on a webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Bookmarks</title>
</head>
<body>

    <h1>HTML Tutorial</h1>

    <nav aria-label="Page contents">
        <a href="#introduction">Introduction</a><br>
        <a href="#examples">Examples</a><br>
        <a href="#contact">Contact</a>
    </nav>

    <h2 id="introduction">Introduction</h2>
    <p>HTML is used to structure webpage content.</p>

    <h2 id="examples">Examples</h2>
    <p>HTML elements define headings, paragraphs, and links.</p>

    <h2 id="contact">Contact</h2>
    <p>Contact us for more information.</p>

</body>
</html>

In this example, the navigation links point to three different IDs. Clicking Introduction, Examples, or Contact moves the browser to the corresponding heading.

Creating Bookmarks to Other Webpages

You can also link directly to a particular section on another webpage by including the page URL followed by the target ID.

<a href="https://example.com/html-tutorial/#examples">
    View HTML Examples
</a>

This link opens the specified webpage and targets the element whose ID is examples, provided that the destination page contains that ID.

HTML Bookmarks with CSS

CSS can improve the appearance of bookmarks and make navigation more comfortable. For example, smooth scrolling can be enabled with the scroll-behavior property.

html {
    scroll-behavior: smooth;
}

When a user clicks a bookmark link, the browser smoothly scrolls toward the target section in supporting browsers.

You can also style the links using CSS classes. Learn more about HTML Classes to understand how reusable styles work.

Benefits of HTML Bookmarks

HTML bookmarks provide several advantages:

  • Faster navigation: Users can jump directly to relevant information.
  • Better user experience: Long pages become easier to explore.
  • Table of contents: Articles can provide links to individual sections.
  • Direct section links: You can share a URL that points to a specific part of a page.

Bookmarks are particularly helpful in tutorials that contain many headings. They can also complement a well-organized HTML page layout.

Frequently Asked Questions

How do I create a bookmark in HTML?

Assign an ID to the target element and create a link using href="#your-id".

Can HTML bookmarks work on another webpage?

Yes. Include the destination URL followed by # and the target element’s ID.

Do HTML bookmarks require JavaScript?

No. Standard HTML links and IDs are sufficient to create bookmarks.

Can multiple links point to the same bookmark?

Yes. Multiple links can use the same fragment identifier to navigate to one target element.

For additional examples, explore Using IDs with JavaScript to learn how JavaScript can also select elements by ID.