Printed from BasicTips.com, FREE helpful articles and tips for Webmasters and Business Owners
Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.BIZ
All rights reserved. Republication in whole or in part in any form is not permitted.

Sponsored by BasicTemplates.BIZ
Website Templates with External CSS and Removable Graphics
http://www.BasicTemplates.biz

Co-Sponsored by Effective-Website-Secrets.com
Teaching webmasters effective web development and marketing techniques via free podcasts.
http://www.Effective-Website-Secrets.com

Category: Web Design
When and How to Hyperlink To an Area On the Same Page
By BasicTemplates with External CSS

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