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 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.
Using #top or #bottom
The following examples use #top and #bottom with the 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.
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
- Complete HTML page code example
Examples
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, 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
Hyperlinks are utilized by a web browser to move from one page to another...
Create a link to the selector
Take me to the opening paragraph.
Result
Take me to the opening paragraph.
Use the #id selector from another page
You can also jump to a specific part of another web page by adding #selector to the page’s URL.
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.
Example Internal Links
Here is an introductory paragraph with the selector ‘opening’ attached to it.
A lot of text that causes scrolling goes here.
Related information
- 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.
- HTML and web design help and support.
