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

Updated: 04/02/2019 by Computer Hope
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 users 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 example shows how to use #top and #bottom with the <a> tag and href attribute to create a link to the top or bottom of the page. This method is similar to using "id," but you don't have to pick a specific element. Click on "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 may be used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is that you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will 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.

Additional information