Loading

HTML: The Hyperlink Tag

The Hyperlink Tag

Click here to download the Lesson 1 HTML template, which you will need for this tutorial.

This tutorial teaches the basics of the <a> tag. An <a> tag can surround text, images, or other inline elements (elements that can occur within a paragraph of text). Here is an <a> tag surrounding text:

<a href="index5.html"
   title="XoaX.net">

   XoaX.net Video Tutorials.
</a>

Here is an <a> tag surrounding an image:

<a href="http://xoax.net" title="XoaX.net">
    <img src="xoaxdotnet.png" border="0"/>
</a>

There are 3 attributes on an <a> tag that are important:

  • title
  • target
  • href

The title attribute is not required, but it is good practice. If you have an <a> tag that surrounds an image, then the title value will appear as a tool tip on top of the image when you hover your mouse over it.

The target attribute is not required either, but it's helpful if you want to change how the browser loads the URL in the href value of your link. if you don't put the target attribute in your <a> tag, then web browsers will open the link in the same tab. If you use the target attribute and put "_blank" as its value, like this:

<a href="index5.html"
   target="_blank"
   title="XoaX.net">

   XoaX.net Video Tutorials.
</a>

Then web browsers will open the link in a new tab or window, depending on how you have the browser options set.

The href attribute is required, and its value can be either a relative or absolute URL. The href value tells the browser where to take the user when they click on the hyperlink.

URLs in an <a> Tag

We'll use this image as an example of our website. Let's assume that the red and blue folders and the redfile.html are all in the domain root, which is where your main website page (i.e., index.html) lives.

The href attribute of the a tag can take either relative or absolute URLs. An absolute URL looks like this, with the http:// and the full domain name before the full path to the file:

http://xoax.net/red/orange/yellow/whitefile.html

http://xoax.net/blue/bluefile.html

Relative URLs assume the http:// and the full domain name and start at the domain root folder.

For example, let's say we're in the yellow folder on the website. And let's say we have an a tag in the yellowfile.html that is linking to the whitefile.html in the same folder. We can put either of these URLs in the href value:

<a href="./whitefile.html">White File</a>

<a href="whitefile.html">White File</a>

The "./" tells the operating system (OS) of the machine to start in the current folder. The OS will assume it if we don't put it there, but it's best practice to include it always.

As another example, let's assume we have an a tag in the whitefile.html and we want to link to the redfile.html. For this, we have to go back up 2 folders from where we are. We write the href value like this:

<a href="./../../redfile.html">Red File</a>

This relative URL starts in the current folder, then the "../" tells the OS to go back up one folder, out of the yellow folder, and another "../" tells the OS to go back up one more folder, out of the orange folder. Now we are in the red folder and we can access the redfile.html.

For a third example, let's assume we're in the bluefile.html in the blue folder, and we want to link to the yellowfile.html in our a tag. So, we have to go back up out of the blue folder, and then into the red, orange, and yellow folders to get to our file. This is how we would write it:

<a href="./../red/orange/yellow/yellowfile.html">Yellow File</a>