Creating Bookmarks in HTML for Internal Linking

Learn how to create and use internal links (bookmarks) in HTML to improve navigation on long web pages. This tutorial shows you how to create bookmarks using the `id` attribute and link to them using the `href` attribute.



Creating Bookmarks in HTML

HTML allows you to create internal links (bookmarks) that let users jump directly to specific sections within a web page, improving navigation, especially on long pages.

Creating and Linking to Bookmarks

To create a bookmark, you use the HTML `id` attribute to assign a unique identifier to the section you want to bookmark. Then, you create a link that points to that identifier using the `href` attribute.

Step 1: Create the Bookmark

Use the id attribute within the HTML element you want to bookmark. Give it a descriptive and unique name.

Example: Creating a Bookmark

<h2 id="chapter4">Chapter 4</h2>

Step 2: Create a Link to the Bookmark

Create a link using the <a> tag. The `href` attribute should start with `#` followed by the `id` value of your bookmark.

Example: Linking to a Bookmark

<a href="#chapter4">Jump to Chapter 4</a>

Clicking this link will scroll the page to the <h2> element with the id "chapter4".

You can also link to bookmarks on other pages (but the href will be a full URL plus the bookmark identifier).

For example: <a href="anotherpage.html#chapter4">Jump to Chapter 4 (on another page)</a>

Summary Table

Attribute Element Description
id Any HTML element Creates a bookmark within the page. Must be unique within the page.
href="#value" <a> (anchor) tag Creates a link to a bookmark within the same page. #value refers to the bookmark's `id`.