How to create links to sections on the same page in HTML

Updated: 07/31/2022 by Computer Hope
#top representing a top anchor.

Hyperlinks are utilized by a web browser to move from one page to another. However, you can also move to a different area on the same page. The following sections show you how to link to the top, bottom, or a specific section on a web page. Choose a method from the following list, or explore both options.

Note

Today, all browsers still recognize "#" as a viable way of moving to the top or bottom of a page. However, this method is deprecated and may not work in future versions of HTML. We suggest using the id method instead as it is more current and versatile.

Using #top or #bottom

The following examples use #top and #bottom with the <a> tag and href attribute to link to that section of the page. This method is similar to using "id," but you don't have to pick a specific element. Click "Top" or "Bottom" in the Results section to see what happens.

Examples

<a href="#top">Top</a>
<a href="#bottom">Bottom</a>

Results

Top

Bottom

Using the id selector

In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, we show you how to apply id to an HTML tag, and then how to link to it. The following two examples link to the opening paragraph at the top of this page.

Use the #id selector

<p id="opening">Hyperlinks are utilized by a web browser to move from one page to another...</p>

Create a link to the selector

<a href="#opening">Take me to the opening paragraph.</a>

Result

Take me to the opening paragraph.

Use the #id selector from another page

You can also jump to a specific part of another web page by adding #selector to the page's URL.

<a href="https://www.computerhope.com/issues/ch000049.htm#opening">Take me to the opening paragraph.</a>

Result

Take me to the opening paragraph.

Complete HTML page code example

The following code shows how both the #top and #bottom anchors and the id selector can all be used on the same page.

<!DOCTYPE html>
<html>  <head>   <title>Example Internal Links</title>  </head>  <body>   <h3>Example Internal Links</h3>   <p><a href="#bottom">Bottom</a></p>   <p id="opening">Here is an introductory paragraph with the selector 'opening' attached to it.</p>   <p>A lot of text that causes scrolling goes here.</p>   <p><a href="#opening">Jump to opening</a></p>   <p><a href="#top">Top</a></p>  </body> </html>