HTML Basics: Linking Pages

To create links internally or externally we use the a tag. The ‘a’ stands for ‘anchor’ and is commonly used in the form of

<a href="http://www.bloggingtips.com">Blogging Tips Link</a>

Anchor tags have a number of attributes available to them. The more common ones are:

href

Defines the destination url

rel

Describes the relation between the document and the destination url. Can have a number of values including next, prev, bookmark (these are recognised values with the W3C), external and nofollow (this was invented by Google to allow site owners to inform the googlebot spider that they could not vouch for the destination url linked to)

title

Allows you to give additional information about the destination url. This appears as a tooltip when a user hovers over the anchor text

External Linking

External links always require the full URL including the http:// or https:// (for secure sites only) in the href value. You can then use the title attribute to description the link or mention that the link will take the user to a new site (this can be useful for usability). The rel attribute can then have a value of external (although this is not a requirement), to provide additional information. So, for example, to add a link to your site to Blogging Tips you could use

<a href="http://www.bloggingtips.com" rel="external" title="External Link: Visit BloggingTips.com">Blogging Tips</a>

Internal Links

Internal links are links that are kept within your site i.e. on the same domain. As with external links, you can use the full http:// or https:// url or you can use a url absolute to the root of your site (by starting the address with a forwardslash), or you can use a url relative to the page.

So all of the following 3 examples would do the same job when linked on this page

Full link
<a href="http://www.bloggingtips.com/2008/11/06/html-document-body/">The HTML Document Body</a>

Absolute to root
<a href="/2008/11/06/html-document-body/">The HTML Document Body</a>

Relative to page
<a href="../../06/html-document-body/">The HTML Document Body</a>

Notice, for the last example I’ve had to use the ‘..’ method which means go back a directory. In this example I’ve had to go back two directories and then go into the directory 06 (for the 6th November) and then into the directory for my page from last week.

All of these methods are fine to use, however your safest options are either of the first two, simply because these are less likely to cause broken links, especially if you move the page or copy the content to a different page located on your site.

Anchor Links

You may think, okay this whole post is about anchor links, however so far I’ve been explaining the anchor “tag”. Anchor links are links that send the user to a specific point on a page. We used to define this point using the name attribute with the a tag e.g.

<a name="specificpoint">Title Optional</a>

However, since XHTML, the name attribute was deprecated, and instead you can use any id attribute as the pinpoint target (in other words, the id attribute doesn’t have to be within an anchor tag, it can be in any tag). For anyone familiar with basic CSS, they’ll have see the id attributes in use before. Targeting the id attribute will work for HTML 4.01 too, so it’s a good method to start using, even though the name attribute is still valid for this specification.

A simple example of using an anchor link is

<a href="#jump">The HTML Document Body</a>

When clicked this would then move you up or down the page to where ever there is an id attribute value of ‘jump’. You’ve possibly seen this on a lot of blog posts, where you click on the ‘Post a Comment’ link, and in the url is #comments. For example on the front page of Blogging Tips for this post we have

<a href="http://www.bloggingtips.com/2008/11/13/html-basics-linking-pages/#comments">Post a Comment</a>

and when you click on this link it takes you to this page, however it jumps down to the start of the comments by using the specific pinpoint of

<h3 id="comments">

You can use anchor links to link to any point within the same page as the link, in a different internal page, and also in an external page. If you link to a specific anchor point and it no longer exists (perhaps you’ve changed the id attribute value without thinking) then the user will just go to the page and not ‘jump’ anywhere within it.

Mailto Link

Finally the mailto link. This allows you to link an email address and when users click the link it will open up their specified mail client with your email address in the To box (this isn’t the case for all users, only those who have the mail client specified in their browser settings under Applications).

To create a mailto link you use

<a href="mailto:you@yourdomain.com">you@yourdomain.com</a>

Here we have the value of ‘mailto:’ at the start of the href value, followed by the email address. The anchor text can be anything you want, however taking into account not everyone can necessarily click the link and expect it to work for them (anyone in an Internet Cafe for example will find it doesn’t work), I would recommend that you also visibly display the address on the page so that people who cannot use the link can at least copy the email address easily.

Next week I’ll explain how you can style these links using CSS

Written by Sarah from Stuff By Sarah
Posted on November 13th, 2008 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates

2