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 or 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.
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 (HyperText Markup Language). 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
Using the id selector
In CSS (Cascading Style Sheets), "id" is a selector that designates an area that a link should point to, similar to an anchor in HTML. The nice thing about using id is creating 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
Jump to a specific part of another web page by adding #selector to the page's URL (Uniform Resource Locator).
<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>