HTML

HTML Link Bookmarks - Create Bookmark

HTML bookmarks allow users to quickly navigate long web pages by jumping to specific sections with ease. This feature is particularly helpful on content-heavy sites, improving user experience by eliminating the need for endless scrolling.

How to Create a Bookmark Link in HTML

To create a bookmark, you assign an id attribute to an element, then link to that id using the <a> tag.

The process for creating an HTML bookmark is straightforward:

Assign an id: Choose the section of the page you want to link to and give it a unique id.
Create a link: Use an anchor tag with the href attribute pointing to the id of that section. This will take users directly to the bookmarked section when clicked.

Example:

<h2 id="section1">Introduction</h2>

<a href="#section1">Jump to Introduction</a>

In this example, clicking the "Jump to Introduction" link takes you straight to the section labeled "Introduction" without having to manually scroll.

You can even create bookmarks that point to sections on other pages:

<a href="sitepoint.html#section1">Go to Introduction on SitePoint</a>

The <h2 id="section1">Introduction</h2> assigns a unique id to the "Introduction" section, which serves as the bookmark.
The <a href="#section1">Jump to Introduction</a> creates the link that, when clicked, jumps the user to the bookmarked "Introduction" section.
This approach can be used for any element, making it especially useful on long pages or documents.

Output:

On a web page, clicking "Jump to Introduction" will automatically scroll to the section titled "Introduction."

Example with multiple bookmarks:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Bookmarks on SitePoint</title>
</head>
<body>

<h2 id="section1">Introduction</h2>
<p>Welcome to SitePoint! This section introduces our resources for
developers.</p>

<h2 id="section2">Chapter 1: Getting Started</h2>
<p>Learn how to begin your coding journey.</p>

<h2 id="section3">Chapter 2: Advanced Topics</h2>
<p>Delve into more complex web development concepts.</p>

<a href="#section1">Jump to Introduction</a> |
<a href="#section2">Jump to Chapter 1</a> |
<a href="#section3">Jump to Chapter 2</a>

</body>
</html>

When the code is rendered in a web browser, it will display three sections with headings and paragraphs. Below these sections, there are three links allowing users to jump to the specific sections without manually scrolling. Clicking on any of the links will automatically scroll the page to the relevant section.

When you click "Jump to Introduction," the page scrolls up to the "Introduction" section. Similarly, "Jump to Chapter 1" and "Jump to Chapter 2" will scroll the page to their respective sections.

You can see how this works on a live example in our table of contents.

FAQ on HTML Links - Create Bookmarks

What is the first step in creating a bookmark in HTML?

The first step in creating a bookmark is to assign a unique id to the HTML element you want to link to. This id acts as a reference point for the bookmark. You can assign an id to any element, such as headings (<h1>, <h2>, etc.) or paragraphs (<p>), to mark it as a destination.

What is a bookmark link in HTML?

A bookmark link is an internal hyperlink that allows users to jump directly to a specific section within the same webpage or on a different page. It is created by using the href attribute in the <a> tag and pointing it to the id of an element. This navigation technique enhances user experience, especially on content-heavy pages.

How do bookmarks work in HTML?

HTML bookmarks work by combining the id attribute with anchor links. Here’s how:

Assign an id: First, assign an id to the element where you want the page to scroll.
Create an anchor link: Then, create an anchor (<a>) link with the href attribute pointing to that id.

When the user clicks the link, the browser automatically scrolls to the section marked by the id. This method helps users navigate long web pages or access specific sections instantly. For example:

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