HTML: Hyperlinks

As interesting as all the tags / HTML elements you have learned about so far, none of them would have been possible without the hyperlink tag. Hyperlinks provide us the ability to go from page to page within our own sites, visit different sites, plus download various other forms of documents such as PDF files.

Like the image tag, there is not all that much involved with the hyperlink tag. In fact it is just <a> followed by some text followed by </a> (the tag actually means anchor). However that on it's own won't do much for us. In order to link to other web pages or files we need to add one very important attribute and that attribute describes where the link will take us. Here is an example:

<a href="page2.htm">Visit Page 2</a>

That code would place a blue line under the text "Visit Page 2" so that when it is clicked the browser would display the html file page2.htm which is shown as the value to the href attribute. HREF itself meaning HTML reference, as in what HTML document will be referenced when the link is clicked. Adding an href attribute to the <a> tag creates a hyperlink.

The value of the href attribute can take two forms. You can indicate an absolute path to where the link should go, or you can indicate a relative path. In a nutshell you would use an absolute path to link to other websites or pages on other websites. An absolute link could look like:

<a href="http://www.winnipegfreepress.com">The Winnipeg Free Press</a>
or
<a href="http://www.justflowers.com/monthlyspecilas/giftbaskets.htm">Gift Basket Specials</a>

You use relative paths to link to pages within your own site. Relative links describe where one file is on a computer or server in relation to another. A relative link could look like:

<a href="contact.htm">Contact Us</a>

The above would then assume that the document is in the same relative location as the document that contains the link. Although the HTML documents for your site do not all need to be in the same folder, they do need to be within the same hierachial directory structure. For example you might have a development folder on your computer called 'my web site'. All the HTML files and images for that site need to be within that folder but within that folder you can have additional folders. While placing all your sites files in a single folder is acceptable, the use of subfolders can help to organize different files by the nature of their content or their purpose (images versus HTML documents).

The Target Attribute
By default, clicking on a link opens the requested document in the same browser window. Sometimes though you may want the link to open in a new browser window. This is usually the case when linking to other websites as you don't want to completely lose the visitors who you have worked hard to attract to your site. Do not do this for links within your own site as this would be confusing to users when they end up with multiple browser windows open of your site.

Here is how we add the target attribute:

<a href="http://www.apple.com" target="_blank">Visit Apple's Web Site</a>

Give it a try and observe what happens:

Visit Apple's Web Site

Note that at this time there is no accomodation for being able to open a page within a new tab. The tab feature is something relatively new to web browsers and the browser creators have added that functionality and a behaviour to allow opening in a new tab has not been determined by the w3c.

Named Anchors
Not only can we create links to different web sites and web pages, we can also create a link to a specific portion of a page. To do so we first define an anchor tag, but instead of adding an href attribute we will provide a name attribute. Here is what that would look like:

<a name="article2">Article 2</a>

The the corresponding hyperlink would look like this:

<a href="#article2">Go to Article 2</a>

If we were to inlcude the above on a web page, clickiung the link "Go to Article 2" would cause the browser window to jump to the place on the page where the named anchor for article2 appears. To provide a better example take a look at this page. View the source code to more clearly see how the named anchor works with the linked anchor to accomplish the task.

Email Links
Email links allow the user to easily email a specified address within a web page. Clicking on the link launches the users default email program and opens a message with the email address already entered. Here is some sample HTML source code:

<a href="mailto:bob@bobshaw.ca">Please E-mail Me</a>

And this is how it appears:

Please E-mail Me

WARNING: DO NOT PUT EMAIL ADDRESSES ON WEB PAGES!! -- SPAMMERS (people who send SPAM) use the same sorts of tools Search Engines do to index web content. In their case though they use them to 'harvest' email addresses. This potentially gives them a real address to use as the sender to send SPAM. By using a real address they have a better chance in getting the email delivered as that address may not yet be blacklisted.

So if you can't place an email address on a page, what do you do?

First I recommend use of a contact form. This allows you to receive email from the site and in no way exposes your email address as all handling of the message is done on the server.

Second I recommend that if you do need to have the address visible you use one of several available methods to obfuscate the email address from the harvesters. One way is by replacing the actual text with it's ASCII code equivalents. This replaces letters with code, so for example 'a' would be '&97;' and the '@' would be ''&64;'. Another is to use JavaScript to conceal the actual characters as well. However, regardless of the approach the technology SPAMMERS use to harvet the email addresses is continually improving. I cannot guarantee that any obfuscation technique will always work.

If you want to learn more:
Wikipedia: Anti Spam Techniques
A List Apart: Graceful E-Mail Obfuscation

Creating Effective Links

1. Keep the links concise. Instead of making an entire phrase a link, only have a link from the keyword(s).

   wrong
   The Winnipeg Free Press has a great deal of information available on their on-line edition.

   right
   The Winnipeg Free Press has a great deal of information available on their on-line edition.

2. Don't create links immediately beside one another.

   wrong
   Looking to buy or sell? The Winnipeg Free Press Classified Ads are available on-line.

   right
   Looking to buy or sell? The Winnipeg Free Press now has their Classified Ads available on-line.

3. Be consistent. Either place your links in a list following the text, or place them in-line with the text. Linking in too many places will confuse the user.
   
4. Only place links where they make sense in context to the document. Create the links where they need to be placed logically.
   
5. Always, always, always test your links to ensure they function in the manner you intended.

So far we have looked at setting up text links. It is also possible to use an image as a hyperlink. This is simply done by surrounding the image tag with the anchor tags for the hyperlink in exactly the same manner you would surround text.

By default, the browser will place a colored border around the image to help the user see that the image is hyperlinked. In almost all cases this effect is likely not one you will want. In order to eliminate the border, simply add a border style to the image tag and set the value to 0.

Here is the HTML source:
<a href="http://www.adobe.com"><img src="/webdev/images/adobe.gif" /></a>
or
<a href="http://www.adobe.com"><img src="/webdev/images/adobe.gif" style="border:0px;" /></a>

and here is how it appears: