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

Updated: 09/15/2017 by Computer Hope

AnchorHyperlinks 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. This example shows the user how to create a link that takes the user to the top of a page.

Using <a href>

The following example shows how to use the <a> tag along with the href attribute, similar to how you'd create a hyperlink to another web page. Using the "#" symbol with your attribute value creates a link to the top of the page. The following example shows the code to create said link. Click on "Top" in the result section to see what happens.

Example

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

Result

Top

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. In the following example, you'll see how to apply #id to an HTML tag, and then how to link to it. This example will link to the first paragraph at the top of this page.

Use the #id selector

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

Create a link to the selector

<a href="#top">Take me to the top of the page.</a>

Result

Take me to the top of the page.

Which method should I use?

Today, all browsers still recognize "#top" as a link to the top of the page. If you want a visitor to go to the very top of the page, the #id selector can be left out, and the "a href" link (shown in the first example) will still work. However, this method is deprecated and may not work in future versions of HTML, so we suggest using the #id method instead.

Additional information