How to Link to a Specific Part of a Page (HTML anchor link)

Sometimes, you may want to link to a specific part of a web page, such as a heading, a paragraph, or an image. This can be useful for creating table of contents, footnotes, references, or bookmarks. To do this, you need to use HTML anchor links.

An anchor link is a type of hyperlink that can jump to a specific location on the same page or on another page. An anchor link consists of two parts: the anchor element and the target element.

The anchor element is the part that you click on to jump to the target element. It is usually created with the <a> tag and has an href attribute that specifies the URL of the target element. The URL can be absolute or relative, and it can include a fragment identifier that starts with # and followed by the id of the target element.

The target element is the part that you want to jump to when you click on the anchor element. It can be any HTML element, such as a heading, a paragraph, an image, or a span. It must have an id attribute that matches the fragment identifier in the anchor element’s href attribute.

For example, suppose you have a web page with the following content:

<h1 id=“top”>How to Link to a Specific Part of a Page</h1> <p>This is an example of how to create anchor links.</p> <h2 id=“section-1”>Section 1</h2> <p>This is section 1.</p> <h2 id=“section-2”>Section 2</h2> <p>This is section 2.</p> <h2 id=“section-3”>Section 3</h2> <p>This is section 3.</p>

To create an anchor link that jumps to section 2, you can write:

<a href=“#section-2”>Jump to section 2</a>

When you click on this link, the browser will scroll down to the <h2> element with id=“section-2”.

To create an anchor link that jumps to section 3 from another page, you can write:

<a href=“page.html#section-3”>Jump to section 3 on page.html</a>

When you click on this link, the browser will open page.html and scroll down to the <h2> element with id=“section-3”.

To create an anchor link that jumps back to the top of the page, you can write:

<a href=“#top”>Back to top</a>

When you click on this link, the browser will scroll up to the <h1> element with id=“top”.

You can also use anchor links to jump to specific text portions or media fragments on a web page. To learn more about these features, you can check out these resources:

• Text Fragments
• Media Fragments

Anchor links are a simple and effective way to enhance the usability and accessibility of your web pages. They allow your visitors to navigate your content more easily and quickly. Try them out and see how they can improve your web design.