| Web Design
When and How to Hyperlink To an Area On the Same Page
You know how to create a standard hyperlink, right? If not, here is a quick review:
<a href="mypage.html">My Page</a>
<a href="http://www.yoursite.com/mypage.html">My Page</a>
But what do you do if you wanted to link to a specific spot on the same page? And in what cases would you want to?
I'll answer the latter first, because when I tell you how to do it, it will make more sense if you knew under what circumstances you might want to use this feature.
Why would you want to link to an area on the same page (called an anchor tag)? If you want to link to a specific location going from mypage.html to anotherpage.html. Rather than send your visitors to the top of anotherpage.html, you can be specific as to exactly where you want their browser to direct them on the page where you send them.
If your pages are long, you can break up the long-scroll problem by using the anchor tag. Place your section names at the top hyperlinked to the anchors you placed within specific areas in your source code. This helps your visitors get to the areas of a l-o-n-g page quickly.
When you want to link to a specific area on a page, you need to do two things.
State the exact location of the specific area in your HTML source code and name it. We named this location "gohere", but you can name it whatever you like that makes sense to you:
Then hyperlink to the area you called "gohere" by using the code below. Note that we used a # tag before the name of the specific location. This # character is called an anchor. This takes the place of a standard page name as shown in the absolute and relative path examples at the beginning of this article when link to a location on the same page.
<a href="#gohere">Go Here</a>
What if you want to link to a specific area on a different page? That's easy. Combine the two techniques. Your hyperlink code will look like this:
<a href="anotherpage.html#gohere">Go Here</a>
<a href="http://yoursite.com/page2.html#gohere">Go Here</a>
Related Article: The Cure for L-O-N-G Web Pages