How to Create Hyperlinks in Webpages


Hyperlinks are created with an “href” tag (hyperlink reference). In it is a simplest form and the syntax tag looks like this:

<a href="page1.html">Go To Page 1</a>

This simple tab goes to “Go To Page 1” which becomes a hyperlink to a page called “page1.html”.  In Webpage it will like this:

Go To Page 1

However, there are two distinct types of hyperlink: “absolute” and “relative”. Absolute links are quite simple, but relative links take a bit of getting used to. Relative links are actually divided into two further categories: “document-relative” and “site-root-relative”.


Absolute Links

An absolute link (or “absolute URL link”) contains a complete internet address, just the same as if you typed the address into your browser’s address bar. The link will always work as long as the destination page exists. Most absolute links begin with “http://” and follow this simple format:

<a href="http://www.mysite.com/index.html">Go To My Site</a>


Document-Relative Links

Document-relative links use directions from the source page to the destination page, sort of like saying “Start here then follow this path until you reach the destination”.

Hyperlinks

Hyperlinks

There are three ways to do this – the method you use will depend on the location of the source and destination pages in relation to each other. We will use the example on the right and create hyperlinks from the page called sourcepage.html to other pages in the site.

(1) If the destination page is in the same directory as the source page
All you need to specify is the source file name:

<a href="page1.html">Go To Page 1</a>

(2) If you try to access page2.html from sourcepage.html

Specify the folder name and then the file name:

<a href="directory2/page2.html">Go To Page 2</a>

(3) If you try to access page3.html from sourcepage.html
Use the special instruction ../ which signifies “one directory higher”.

The following link means “Go up one directory level, then go to a folder called directory3, then to a file called page3.html“:

<a href="../directory3/page3.html">Go To Page 3</a>

You can repeat the ../ to make the link more than one level higher, for example, “Go up two levels, to a file called index.html“:

<a href="../../index.html">Go To The Index Page</a>

NOTE: For relative links to work, you must keep the file structure intact.


Site-Root-Relative Links

Site-root-relative links use a single forward-slash / to signify the instruction: “Start at the document root of the site and go down the directory path from there.” The format is:

<a href="/main-directory/directory4/page4.html">Go To Page 4</a>

The link begins at the same level as your domain and works down from there. The link above is the same as:

<a href="http://www.mysite.com/main-directory/directory4/page4.html">Go To Page 4</a>

This method has the significant advantage of staying intact if you move the source page. The exact same link will work from any page anywhere in the site.

Notes: This method will not work on files on your own hard drive unless you run them through a personal web server or a hosted server.


Targets

You can specify a target window or frame for a hyperlink. This is where the linked page will open. If no target is specified, the link will open in the same window/frame. The format is this (where the target is “self”):

<a href="page1.html" target="_self">Go To Page 1</a>

The target window options are and it will work for “absolute” and “relative”:
_self : Opens in the same window and same frame.

<a href="page1.html" target="_self">Go To Page 1</a>

_top : Opens in the same window, taking the full window if there is more than one frame.

<a href="page1.html" target="_top">Go To Page 1</a>

_parent : Opens in the parent frame.

<a href="page1.html" target="_parent">Go To Page 1</a>

_blank : Opens in a new window.

<a href="page1.html" target="_blank">Go To Page 1</a>


Link to a Specific Part of a Page (Internal Hyperlink)

An internal hyperlink is a link which points to a particular part of a page. This can be useful in long pages with lots of sub-sections. For example, the links at the top of this page are internal links pointing to each sub-heading.

Internal hyperlinks require an anchor tag with the “name” attribute like so:

<a name="part2">Part 2</a>

Create an anchor like this at the place in the page you want to link to. It doesn’t matter if there is anything between the open and close tags.

Then create a hyperlink which refers to this anchor with a hash (#) like so:

<a href="#part2">Go To Part 2</a>

This assumes that the name anchor is on the same page as the hyperlink. To link to an anchor on a separate destination page, simply create a normal link with the anchor name appended to the file name like so:

<a href="page1.html#part2">Go To Page 1, Part 2</a>


E-Mail Links (mailto)

E-Mail links, otherwise known as a “mailto” links, use the following format:

<a href="mailto:myname@mysite.com">Click Here to Email Me</a>

This type of link is a special case, completely different to those described above. Instead of linking to a place on the internet, clicking this link causes the user’s computer to open it’s default email program (e.g. Outlook Express, Eudora, etc) and prepare a blank email to the specified address. The user then enters their message and sends the email in the normal way.

If you want to be tricky, you can add a “subject” attribute to the link. This will automatically insert the specified subject line into the email:

<a href="mailto:myname@mysite.com?subject=Inquiry From Website">Click Here to Email Me</a>

Notes: The subject attribute doesn’t work in all browser/email programs. Those programs which don’t support it will probably just ignore it, but there are no guarantees that it won’t cause an error. Use at your own risk.