HTML bookmarks allow users to create links that take them directly to a specific section of the same webpage. They are especially useful for long articles, tutorials, documentation pages, FAQs, and tables of contents.

An HTML bookmark is created by giving an element a unique id and then creating a link that points to that id using the # symbol.

If you are new to HTML links, first learn about HTML Links and HTML Link Syntax.

What Is an HTML Bookmark?

An HTML bookmark is a link to a specific location on a webpage.

For example:

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

The #contact part tells the browser to find an element with the id="contact" attribute.

The destination can be created like this:

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

When the user clicks the Go to Contact link, the browser moves to the Contact Us section.

Creating an HTML Bookmark

Creating a bookmark requires two steps.

First, add a unique id to the destination element:

<h2 id="services">Our Services</h2>

Second, create a link pointing to that ID:

<a href="#services">Go to Services</a>

The href value starts with # followed by the ID of the destination element.

HTML Bookmark Example

Here is a simple complete example:

<h1>My Website</h1>

<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>

<h2 id="about">About Us</h2>
<p>Information about our website.</p>

<h2 id="services">Our Services</h2>
<p>Information about our services.</p>

<h2 id="contact">Contact Us</h2>
<p>Information about contacting us.</p>

Clicking each link takes the user directly to the corresponding section.

For more information about HTML attributes such as id, see HTML Attributes.

Using Bookmarks in a Table of Contents

Bookmarks are commonly used to create a table of contents for long webpages.

<h2>Table of Contents</h2>

<a href="#html-links">HTML Links</a><br>
<a href="#html-images">HTML Images</a><br>
<a href="#html-tables">HTML Tables</a>

The corresponding sections can be created with matching IDs:

<h2 id="html-links">HTML Links</h2>

<h2 id="html-images">HTML Images</h2>

<h2 id="html-tables">HTML Tables</h2>

This makes long pages easier to navigate.

Linking to a Bookmark from Another Page

You can also link directly to a bookmark located on another webpage.

Suppose another page contains:

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

You can link to that specific section from another page:

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

You can also use a complete URL:

<a href="https://example.com/contact.html#contact">
    Contact Us
</a>

This combines a webpage URL with a fragment identifier.

You can learn more about complete web addresses in HTML Absolute URLs and relative paths in HTML Relative URLs.

Bookmarking the Top of a Page

You can create a link that takes users back to the top of a webpage.

Add an ID near the top:

<body id="top">

Then create the link:

<a href="#top">Back to Top</a>

Another simple option is:

<a href="#">Back to Top</a>

Using a specific id is generally clearer when you want to identify an exact destination.

Best Practices for HTML Bookmarks

Use unique and descriptive id values for bookmark destinations. Avoid spaces in IDs and make sure the href fragment exactly matches the destination ID.

Bookmarks are particularly useful for long-form content because they reduce scrolling and help visitors quickly reach the information they need.

HTML bookmarks are a simple but powerful navigation feature. By combining the <a> element, href, and id attributes, you can create smooth navigation within the same webpage or directly to specific sections of another page.