How to Add an HTML Link to Section of Page Easily

Navigating through a long web page can be challenging, especially when users need quick access to a specific section. One of the best ways to improve user experience is by using an HTML link to a section of a page, also known as an anchor link. This allows users to jump to a specific part of the current document without excessive scrolling.

This blog will explain how to create a functioning hyperlink that directs users to different sections of a web page using anchor links, the href attribute, and the id attribute.

What is an Anchor Link in HTML?

An anchor link is a type of HTML hyperlink that directs users to a specific section within the same page instead of loading a new page or a linked document. These links improve navigation, making a website more user-friendly.

To create an anchor, two elements are required:

1. An Anchor Point: This is the destination where the browser window should navigate. It is defined using the id attribute.

2. A Link to the Anchor: This is the clickable hyperlink that uses the href attribute to reference the anchor name.

How to Create an Anchor Link in HTML

To create a link to a specific part of the same page, follow these steps:

1. Define the Anchor Point

The first step is to set an anchor name at the link’s destination. This is done by adding an id attribute to the element where you want to jump.

Example: Adding an Anchor Point

1<h2 id="section1">Welcome to Section 1</h2>

​

In this example, the id attribute is set to "section1", marking this as the link’s destination.

2. Create the Anchor Link

Now, create a clickable hyperlink using the <a> tag with the href attribute, pointing to the id of the anchor.

Example: Creating the Link

1<a href="#section1">Go to Section 1</a>

​

When users click this HTML link, they will jump directly to the "section1" location.

How to Create an Anchor Link to Another Webpage

An anchor link can also point to a specific section of a different web page. The process is similar, but the href must include the URL of the linked document along with the anchor name.

Example: Linking to Another Page

1<a href="https://example.com/page.html#section2">Go to Section 2 on Another Page</a>

​

Here, clicking the hyperlink will open "page.html" and jump to the "section2" location.

Using Target Attribute for Anchor Links

The target attribute controls how a browser window handles the link. By default, links open in the current page, but you can specify a new browser window or other element.

Example: Open in a New Browser Window

1<a href="#section1" target="_blank">Go to Section 1</a>

​

This example ensures that the HTML link opens in a new page instead of the current document.

How to Create Smooth Scrolling Anchor Links

By default, an anchor link immediately jumps to the specific part of the web page. To add smooth scrolling, use cascading style sheets (CSS).

Example: Enabling Smooth Scrolling

1html {
2  scroll-behavior: smooth;
3}

​

This code makes anchor links smoothly transition instead of abruptly moving to the link’s destination.

How to Use an Image as an Anchor Link

An image can also be used as an anchor link. This is useful for websites where users click on an image instead of text.

Example: Creating an Image Link

1<a href="#section1">
2  <img src="image.jpg" alt="Jump to Section 1">
3</a>

​

Clicking the image will jump to "section1" within the same page.

Anchor Links and Default Browser Behavior

Different browsers may handle HTML links slightly differently. Some browsers apply a default focus style when clicking an anchor link, which can be removed using CSS.

Example: Removing Default Focus Style

1:target {
2  outline: none;
3}

​

This code ensures that the browser window does not highlight the specific section after clicking an anchor link.

Common Mistakes When Creating Anchor Links

When adding anchor links, these common errors can cause issues:

1. Forgetting the Hash Symbol (#) in the href Attribute

   • Incorrect: <a href="section1">Go to Section 1</a>

   • Correct: <a href="#section1">Go to Section 1</a>

2. Using an ID That Doesn't Exist

   • Ensure the id attribute in the linked document matches exactly.

3. Opening in the Same Directory Without Correct Path

   • If the linked document is in the same directory, use:

1<a href="page.html#section1">Go to Section 1</a>

​

Benefits of Using Anchor Links in Web Development

Adding an HTML link to a section of a page provides several advantages:

• Improves User Navigation: Helps users quickly access different sections of a web page.

• Enhances Readability: Avoids unnecessary scrolling in lengthy web pages.

• Optimized for SEO: Search engines recognize structured navigation within a website.

• Better User Experience: Visitors can efficiently locate the specific section they need.

Final Thoughts

Using an HTML link to a section of a page improves the usability of a website by helping users quickly navigate through content. Whether linking within the same page or directing to a linked document, properly implementing the href attribute, anchor tag, and id attribute ensures smooth navigation.

By following the steps in this guide, you can create an anchor, use HTML links, and enhance your web page structure efficiently.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.