HTML - Linking

Creating links is really quite easy, you just have to remember that there are three different types of links: internal, external and mailto. Internal links forward users to information on that same html page. These links are generally used for long pages where scrolling is necessary to see everything on the page. With internal links, a person can have a type of table of contents that links to important information on the same page, but not within view. External links are all the links that go to another page. These links can go to completely different Web sites or to other pages within your Web site. The mailto link opens up the user's email client on their computer with the email address you specified already placed in the "To:" line.

Let's start with external links, you'll use them the most often. If you are linking to another page within your Web site, this is the code you would use:

<a href="samplepage.html">Go To My Sample Page</a>

These are the anchor tags (for linking). Notice that you put the anchor tags around the text you want to link, just like a set of paragraph tags. The above link would only work to go to "samplepage.html" if that document is in the same folder. The href="" attribute works just like the src="" attribute of the image tag. You must place the whole path inside the double quotes. So, if the file was in a folder the path would be href="folder/samplepage.html". If the file was up one level of folders, the path would be href="../samplepage.html".

Now, if you wanted to link to a totally different Web site, you would put the entire Web address. Just don't forget the "http://" part...

<a href="http://www.htmlhelp.com">Go here for some additional HTML help</a>

Internal links are a little bit more complicated. For an internal link, you must specify several things. For starters, you have to use two tag sets (by "tag set" I mean opening and closing tags) instead of just one. Additionally, both of the tags use different attributes.

When you learned external links, you used the href="" attribute to "go to" other pages. That's exactly how you should remember the href="", as the "go to" attribute. For an internal link, we use the attribute like this:

<a href="#moreinfo">See More Info</a>

Notice that this tag set isn't linking to a file. It's really linking to a place in that document that you specify. The computer knows this because you placed a "#" before you indentified the place you want to link to.

So now you've set the link, but it has no where to go. To remedy this problem, you must use another tag set. It'll look something like this:

<a name="moreinfo" id="moreinfo">This is more info...</a>

This line of code identifies "This is more info..." as a location (anchor) that can be linked to from an internal link. To do this, you must use both the name="" and id="" attributes. Actually, they do almost the exact same thing, but the World Wide Web Consortium (the people that make the rules) are replacing the old name="" with the new id="". As a result, you need to use both to be compatible with the new guidelines and old browsers.

Now what if you wanted to link to an anchor (internal location) on another page? In other words, link to an internal place from an external page. Just place the "#moreinfo" after the file path. Here's the code:

<a href="samplepage.html#moreinfo">More Info</a>

The last use of linking that you should know about is the "mailto" link. If you haven't run into a "mailto" link before, it opens up your email client and automatically puts in the email address in the "To:" line. There's an example on the right side of the footer of this page. Please don't send any test emails... Here's the code for a "mailto:"

<a href="mailto:somebody@somewhere.com">Send Somebody an Email!</a>

It's really quite simple, just use the href="" and include "mailto:". Take note though, the mailto link does not work on computers where an email client is not set up. Places such as school computer labs and libraries are among the possiblities.

Practice

Now that you've completed all the lessons you need for a basic Web site, go on to some Additional Formatting.

Introduction | Basic Formatting | Images | Linking
Additional Formatting | Lists/Bullets | Basic Tables
Advanced Tables | Forms | HTML Cheat Sheet