Lesson 6: Creating HTML Hyperlinks  

     The Anchor Element ( A )     

The anchor element A is used to link different documents together. It contains at least one attribute. For the function of linking to a different document, the attribute HREF (Hyper REFerence) is used. The value of the attribute HREF is the path to the location of the target document (either a complete URL or a relative path - explained below). And finally, the content of the element is what appears as link text (or image).

In the first example I´m creating a link to the homepage of my website easywebtutorials.com, so the value of HREF in this case is the complete URL of my website: http://www.easywebtutorials.com

Display Example: This is how it looks like in your browser.

Try it yourself now - add some links to your webpage now. Watch the video first to see more examples and to see me creating hyperlinks manually as well as using 1stPage2000´s shortcuts to speed it up.

Video button not working ? Click Here

     Absolute and Relative Paths     

To link to other webpages you can use absolute and relative paths.
Absolute paths are complete URLs, for example:
http://www.easywebtutorials.com   or
http://www.dentalcarebuddy.com/reviews/best-electric-toothbrush.html

Absolute paths are always used for external links, i.e. hyperlinks from your own website to documents (webpages) of other websites.

To link to other webpages of your own website (internal links), you can use relative paths (= relative URLs) instead of absolute paths. Relative paths are much shorter and another advantage is that when you use relative paths for your internal links, then you´ll be able to browse through your website on your local desktop.

So what is a relative URL ?

Simply put, it´s the path to a different document relatively to the location of the linking document. Here are some examples:

1. Let´s say you want to link from your homepage (index.html) to your contact page (contact.html), which is stored in the same folder. So the URLs you could use to create the hyperlink would be:

absolute URL: <a href="http://www.yourdomain.com/contact.html">
relative URL: <a href="contact.html">
You see, the above relative URL tells your browser to look for the file contact.html in the same folder in which the linking document (index.html) is located, too.

2. If you want to link from your homepage to a webpage located in a subfolder then you need to add the name of the subfolder and a forward slash before the target document´s file name. For example: the relative path to the index file of an article directory located in the subfolder "articles" would be articles/index.html.
This basically tells your browser to go from the current location into the subfolder "articles" and there it will find the document "index.html".

In the case of index files you could also just link to the folder (= directory), because a browser looks for and loads index files by default. Simply use the so-called "directory URL", which ends in a forward slash. For the above example this would be articles/ .

3. To link back from the article directory index page to your homepage, you would need to tell your browser to "go up" one folder first. The relative path for this would be ../index.html

The video shows you some more examples and explains again with a practical example why relative paths are better for internal links than absolute paths.

Video button not working ? Click Here

     Open Target Page in a New Browser Window     

Sometimes you want to make the links open in a new browser window, so that visitors of your website don´t leave when they click on an external link - just like the display examples in this tutorial open in new windows. To accomplish this, you simply add the attribute TARGET with the value _BLANK to the anchor element A. Note: the underscore (_) before "BLANK" is not a typo.

Display Example: This is how it looks like in your browser.

Watch the video how to add the attribute TARGET to your links manually and also where to find it in 1stPage2000´s link builder.

Video button not working ? Click Here

     Deep Linking Inside a Document     

You can also link between different parts of the same document. This is very useful in cases where your webpages are very long, such as the glossary of this tutorial. Or to make a long FAQ list more user-friendly, you could list all the questions on the top of the page and link them to the answers within the same document.

For example: If you wanted to know the definition for the term attributes you will notice that this link jumps directly to the term "attributes" in the glossary. As the term is explained under "HTML attributes", the link below "attributes" will take you directly to a different part of the same webpage. Try it out.

In order to accomplish that, you need to do two things:

First: Place an anchor inside your document or in other words: mark and name the point inside your document to which you want to link to. This is done with the anchor element A and the attribute NAME instead of "HREF".

The value for the attribute NAME must begin with a letter in the range of A-Z or a-z and may be followed by letters (A-Z, a-z), numbers (0-9), hyphens (-), underscores (_), periods (.) and colons (:). The value of a NAME attribute is also case-sensitive, i.e. "anchor1" and "Anchor1" are treated as different values. You may leave the content of this element blank (like in the example below).

Second: Link to the anchor inside your document. This is done by using the "#" sign followed by the anchor name as link target, hence you would use the following code to link to the above anchor.

In addition to jumping between the different anchors inside the same webpage, you can also link directly to an internal anchor from a different page. For this purpose, simply append "#" and the anchor name to the linked file name.

For example, a direct link from this webpage to the definition of "HTML elements" in the glossary would look like this:

Let´s take a look at another simple example: below is the HTML code for a simple webpage with a headline and two sub-headlines. Below the sub-headlines are links to jump back and forth between the two sub-headlines. (I´ve included a lot of line breaks in order to create a lot of white space so you can actually jump between the links).

Display Example: This is how it looks like in your browser.

In the video below I´m going to show you how you can implement these internal document links in a list of FAQ in order to make it more user-friendly for your visitors. You can try it out yourself by using the same document for modification.

Video button not working ? Click Here

     Linking to an Email Address     

You can also create hyperlinks to email addresses. When your website visitors click on such a link, it will launch their email client with a new message and the recipient field already filled out with the linked email address. To create such a link, simply use the value "mailto:EMAIL" for the href attribute. Below are two examples:

Display Example: This is how it looks like in your browser.

Warning ! If you publish your email address on your website, sooner or later it will get picked up by email harvesting software (aka spambots) and you will receive a lot of spam. In Lesson 14: Main Webpages, I will give you a cool little javascript that hides your email address from spambots and show you how to use it on your contact page.

Hint: the e-mail address used in the example above is not valid. You bet, I wouldn´t display one of my real e-mail addresses here on these pages.

     Using Images as Hyperlinks     

Instead of plain text, you can also use images as links to other webpages, of course. That´s the way how buttons and banners work. You already know how to insert an image into a webpage, so the only thing you need to do now to turn it into a link is to use the image as content for the anchor element ( placing it between opening and closing anchor tag ) instead of a link text.

In the example below you see two different images (banners) as links, one with the border attribute set to 0 and the second one without the border attribute, so you can see the different it makes.

Display Example: This is how it looks like in your browser.

Many websites use buttons in all kinds of styles, colors and shapes as navigational links to the most important webpages. Now that you know how to use images as links, it should be easy for you to create a horizontal or vertical menu for your website with buttons.

To create the buttons for your website, you can use any graphic program of your choice or simply use the free online button builder shown in lesson 13: Logos and Buttons .

Here are two examples that you can study: a horizontal and a vertical menu. The only difference between both are the line break tags behind each link in the vertical menu. The target webpages and directory URLs are just made-up. If you want to experiment yourself with buttons now, simply copy some of the sample buttons from the tutorial ( in the subfolder graphics\buttons\ ) to the image folder of your website and then place them into your first webpage.

Example 1: Horizontal Menu.

Example 2: Vertical Menu.

The next lesson teaches you the different types of lists you can create in HTML.