You know how to create a standard hyperlink, right? If not, here is a quick review:
Relative Path:
<a href="mypage.html">My Page</a>
Absolute Path:
<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:
<a name="gohere"></a>
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:
Relative Path:
<a href="anotherpage.html#gohere">Go Here</a>
Absolute Path:
<a href="http://yoursite.com/page2.html#gohere">Go Here</a>
Related Article: The Cure for L-O-N-G Web Pages
Click here to sign up for FREE Tech. newsletters from Murdok!
BasicTemplates.com designs Website Templates with External CSS and has been providing webmasters worldwide with affordable template designs since 1994. BasicTemplates currently offers 650+ designs which may be purchased individually or get complete access to all templates via an affordable membership plan. Most templates were strategically designed with interchangeable graphics and elements to increase the potential number of design layouts for the end user. Each layout utilizes an external style sheet for easy site maintenance and to ensure fast page load.
