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. 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.
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>
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.
- How to create an HTML link on a web page.
- How to create a link that opens a new web page window or tab.
- See our hyperlink definition for further information and related links to this term.