Bookmark Link

What is a Bookmark Link?

A bookmark link moves users directly to a specific section of a webpage.

Developers use bookmark links on large webpages so users can quickly reach the information they want.

Syntax

<!-- href specifies the destination section using its ID -->
<a href="#contact">Go to Contact Section</a>

<!-- id identifies the destination section -->
<h2 id="contact">Contact Section</h2>

Attributes and Symbol:

• href: Specifies the destination of the link.
• id: Identifies the HTML element where users will go.
• #: The hash symbol is written before the ID value in the href attribute to link to a specific section.

Note: The # symbol is not an HTML attribute. The ID in href must match the destination element's id.

Example 1: Link to a Specific Paragraph on Another Webpage

The id attribute gives a unique identifier to an HTML element, such as a paragraph or heading. Add id="id_name" to the opening tag of the element you want users to reach.

To link directly to it, add #id_name after the destination webpage URL in the href attribute of the anchor (<a>) tag.

Page 1: Destination Page (about.html)

Add an ID to the paragraph that you want users to reach.

HTML Code

<p id="html-intro">
  HTML is used to create webpages.
</p>

Here, id="html-intro" identifies the destination paragraph.

Page 2: Link Page (index.html)

Use the anchor tag to link to the specific paragraph on the destination webpage.

HTML Code

<p>
  Learn more about
  <a href="about.html#html-intro">HTML</a>.
</p>

Here, about.html specifies the destination webpage, and #html-intro points to the paragraph with the matching ID.

Follow These Steps:

1. Add an ID to the paragraph on the destination webpage.
2. Write the destination webpage URL in the href attribute.
3. Add the # symbol followed by the same ID value after the URL.
4. Click the link to open the destination webpage and reach the specified paragraph.

Example 2: Link to a Specific Section on the Same Webpage

To link to a specific section on the same webpage, add an ID to the destination element and use #id_name in the href attribute.

HTML Code

<h2>About HTML</h2>

<p>HTML is used to create webpages.</p>

<p>
  <a href="#html-intro">Go to HTML Introduction</a>
</p>

<h2 id="html-intro">HTML Introduction</h2>

<p>HTML uses tags to structure webpage content.</p>

Here, id="html-intro" identifies the destination heading, and href="#html-intro" links to it. Both use the same ID value.

Follow These Steps:

1. Add id="id_name" to the heading or paragraph where users should go.
2. Add href="#id_name" to the anchor (<a>) tag where you want to display the link.
3. Make sure both ID values match exactly.
4. Click the link to move to the specified section on the same webpage.