Create links to sections on the same page in HTML

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

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
• Using the id selector

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, 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.