Links!

Creating our web.

Introduction

Links are an important part of the world wide web. They allow us to easily jump from page to page and navigate the absolute mountain of information that is out there. Linking effectively between pages on your own site, and other sites is an important thing to consider as a website developer.

A link is created using an a tag. It stands for anchor. Within the anchor we have an attribute which defines what the anchor links to.

<a href="location">link</a>

Anything contained within the opening and closing a tags becomes a link to the location specified by the href (hypertext reference) attribute.

simple_link.html

  1. <body>
  2. <p><a href="http://todolistme.net">todolistme.net</a> is a
  3. pretty good, simple todo list manager.</p>
  4. </body>
Simple Links

todolistme.net is a pretty good, simple todo list manager.

A link can be created around, text, images and just about anything that you can display within the browser.

Location Types

The link is actually something called a URL (Uniform Resource Locator). The link may be global or relative.

Global Links

A global (or absolute) link specifies the absolute location of a resource. These always begin with a protocol (typically http or https), followed by the website domain and optionally the path from the base of the domain to the specific resource. If you don't include the path component (as is the case with the example link above) then it will default to the main page for the domain.

  • http://ryanstutorials.net - is a global url to the main page of this domain.
  • http://ryanstutorials.net/html-tutorial/html-links.php is a global url to a specific page on this domain.

A global url may be placed anywhere on any page and it will always point to the same location.

Relative Links

Relative links are a little more complex. They are based upon where we currently are. Here are a few examples:

  • ./html-images.php - a url to another page in the same directory as this page. (the ./ at the beginning is optional)
  • ../problem-solving-skills/ - the two dots ( .. ) mean go up a directory, then down into the directory problem-solving-skills. Because we didn't specify a file, the default will be assumed ( index.php )
  • /graphic-design-tutorial - starting at the base of the current domain, go into the directory spcified.

Here is an example of 3 different ways to link to the next page in this tutorial.

different_links.html

  1. <body>
  2. <p><a href="http://ryanstutorials.net/html-tutorial/html-images.php">Absolute link</a>
  3. to the next section.</p>
  4. <p><a href="/html-tutorial/html-images.php">Relative link</a> to the next section
  5. from the base of the domain.</p>
  6. <p><a href="./html-images.php">Relative link</a> to the next section from our
  7. current location.</p>
  8. <p><a href="html-images.php">Relative link</a> to the next section leaving out the ./.</p>
  9. </body>
Link Examples

Absolute link to the next section.

Relative link to the next section from the base of the domain.

Relative link to the next section from our current location.

Relative link to the next section leaving out the ./.

If you hover your mouse over each of the links above you will see that the browser identifies each of them as going to the same location.

If your relative links aren't working properly, the best way to troubleshoot them is to load the page in a browser and hover your mouse over the link. Identify where the browser wants to go from the link and compare this to where you think it should go. This will help you identify how you need to change it to make it correct.

So Should I use Absolute or Relative?

From the point of view of the end user it doesn't matter which you use. As long as the link is correct it will get to the right location regardless of whether it is relative or absolute. From a developer point of view however, the choice can be quite important.

If you are linking to a location on another domain then the choice is easy, it has to be an absolute URL.

If you are linking to a page within your current domain then it is usually better to use a relative url. This allows you flexibility.

Let's say I was using absolute URL's for all the links on my site to other pages within my site. One day I decided that Walter was a much better name and switched my name accordingly. Then I bought the domain walterstutorials.net. Now I would have to go through the whole site and update all my links to the new domain. But with relative URL's I would not need to do this.

Another scenario is that I have a testserver. I maintain a copy of my site there and test any changes there first before deploying them on my live site. If I had absolute links then on my test site whenever I clicked a link it would take me back to the live site. With relative links however they automatically point to the right location.

Linking Within Pages

As well as linking to pages, we may also link to specific parts within a page. We may do this by either creating a named anchor or placing an id attribute on a tag that is at the place on the page we would like the link to take us.

<a name='anchorname'> </a>
or
<tagname id='anchorname'> </tagname>

Whether you use names or id's they should all be unique. That is, no two names or id's on a particular page should be the same. (It is ok for them to be the same on different pages however).

We then link to that part of the page by including an #anchorname to the end of the URL for the particular page.

anchors.html

  1. <body>
  2. <a name="mysection1"></a><p>This is an interesting section.</p>
  3. <p id="mysection2">This is another interesting section.</p>
  4. <p><a href="./html-links.php#mysection1">Jump to section 1</a> or
  5. <a href="#mysection2">Jump to section 2</a>.</p>
  6. </body>
Anchors Examples

This is an interesting section.

This is another interesting section.

Jump to section 1 or Jump to section 2.

In the example above, when you click on the links it will put the identified section at the top of the page (unfortunately that is behind the top bar of the site but there is nothing we can do about that).

In general it is preferred to use id's as opposed to names. The code is cleaner and id's can also be used for other purposes in CSS and Javascript.

Email Links

It is also possible to specify an email address as your URL. As long as your browser is set up correctly is should result in your email client being opened up and an email being started to the given address. We use the following format:

<a href="mailto:email@address.com"> </a>

email.html

  1. <body>
  2. <p><a href="mailto:ryan@nowhere.net">Email me</a> click the link
  3. to send email to an address that doesn't exist.</p>
  4. </body>
Email Examples

Email me click the link to send email to an address that doesn't exist.

It is also possible to specify a default email subject and body in the link.

email.html

  1. <body>
  2. <p><a href="mailto:ryan@nowhere.net?subject=An important message">Email me</a>
  3. Email with the subject predefined..</p>
  4. <p><a href="mailto:ryan@nowhere.net?subject=An important message&body=Not really that important">Email me</a>
  5. Email with the subject and body predefined.</p>
  6. </body>
Email Examples

Email me Email with the subject predefined..

Email me Email with the subject and body predefined.

Keep in mind that although you can provide a default for the subject and body of the email, you cannot prevent the user from changing that in their email.

Be weary about including email addresses on pages that are publicly visible. Spammers use tools which seek out these links and include those email addresses in their spam email lists.

Link Titles

It is quite easy to add a title to a link. A title is a little message that pops up when a user hovers their mouse over the link. To do so we add an attribute which is title (not to be confused with the title tag in the head of the document).

<a href="location" title="link title">link</a>

This can be useful for giving the user a little more information once they have shown interest in the link.

title.html

  1. <body>
  2. <p><a href="http://todolistme.net" title="Keep yourself organised">todolistme.net</a> is a
  3. pretty good, simple todo list manager.</p>
  4. </body>
Titles

todolistme.net is a pretty good, simple todo list manager.

Hover your mouse over the link in the example above.

The title attribute is not just confined to links. You may in fact add it to any tag and it will work.

Summary

<a href="URL"> </a>
Create a link to the specified URL.
id="anchorname"
Create an anchor which may be linked to by adding #anchorname to the URL.
mailto:email@address.com
Used as a URL to send an email to the specified address.
title="title text"
Add a message which will be displayed when the user hovers their mouse over the item.
Absolute and Relative URL's
Using the right type can make your life much easier.

Activities

Now let's make our content a little more interesting.

  • Add some links to your page. Make sure you link to both external pages and internal pages (if you only have a single page then just link to itself)
  • Create a link to an email address. Include a default subject and body in the link.
  • Add an id to an item at the very top of your page. Now create a link at the bottom of your page which you can click to take you back to the top of the page.
  • Add a title attribute to various elements within your document. Try adding one to a heading and a paragraph.

As we work through this tutorial, each section will add new tags allowing you to do more interesting things. My suggestion would be that you pick a topic or subject of interest to you and create a page about that. As you work through each section, add to and improve the page with the new tags you have learnt.