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`. |