How to create bookmarks in HTML

Overview

Developers use HTML bookmarks to control the flow of their web pages and direct the traffic on their web pages to relevant sections by linking them together or to other relevant web pages. They are helpful when the websites have a lot of content. This ensures a better user experience.

Steps

Creating bookmarks in HTML is a two-step process. Here are the steps to follow:

  1. Set a bookmark using the id attribute of the HTML tags, such as <h2>, <p>, and so on.
  2. Link the HTML tag created, using an anchor tag, <a>, and the href attribute.

Note: It is compulsory to specify a unique id attribute while creating a bookmark using HTML tags is compulsory.

Syntax

Here is the syntax needed to create bookmarks in HTML:

//creating a bookmark
<element id='mybookmark'>creates bookmark</element>

//creating an <a> tag to refer to the bookmark
<a href='#mybookmark'>refers to the created bookmark</a>

Code

The code example below illustrates the creation and the use of bookmarks:

The creation of bookmarks in HTML
Explanation
The explanation of the code is given below:
  • Lines 7–10: In these lines, anchor tags <a> are created with the href attribute specified to take the user to specific web page sections when clicked.
  • Lines 13, 25, and 37: These lines of code contain the content of the web page made using HTML tags. The <h2> tags have the specified id attribute so they can be linked to the <a> tags.
  • Line 49: This line contains an <img> tag with the id attribute set to the value of educativelogo. This is also used as a bookmark.


Note: It is important to concatenate # with the section’s id when it is referenced in the href attribute of the <a> tag.




Free Resources
Copyright ©2025 Educative, Inc. All rights reserved