Horje
How to create HTML Bookmarks with ID and Links (Jump to Specific Text)

HTML bookmarks are used to allow readers to jump to specific parts of a webpage.

Bookmarks can be useful if your page is very long.

To use a bookmark, you must first create it, and then add a link to it.

Then, when the link is clicked, the page will scroll to the location with the bookmark.


Basic Example of HTML Bookmarks with ID and Links

First, create a bookmark with the id attribute:
<h2 id="C4">Chapter 4</h2>

Full Example of HTML Bookmarks with ID and Links

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

Output should be:

Full Example of HTML Bookmarks with ID and Links

Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:
<a href="html_demo.html#C4">Jump to Chapter 4</a>





Related Articles
What is HTML id Attribute HTML id Attribute
How to Use HTML id Attribute HTML id Attribute
What are the Difference Between HTML Class and ID HTML id Attribute
How to create HTML Bookmarks with ID and Links (Jump to Specific Text) HTML id Attribute
How to use The id Attribute in JavaScript HTML id Attribute

Single Articles
Basic Example of HTML Bookmarks with ID and LinksHTML id Attribute
Full Example of HTML Bookmarks with ID and LinksHTML id Attribute

Read Full:
HTML id Attribute
Category:
Web Tutorial
Sub Category:
HTML id Attribute
Uploaded by:
Admin
Views:
74


Reffered: https://www.w3schools.com/html/html_id.asp