Links

Links are what makes the internet run and take you from page to page and site to site. Without them, it would be hard to find anything online, and more importantly, nobody could find your site. Links play an important part in SEO, which you will learn after you finish the HTML lessons.

<a> is a link tag. "A" stands for "anchor". It is important to always close your anchor tags. If you don't, the rest of the page after the link can turn into one giant link, until a closing anchor tag is reached. It can be quite confusing when you do forget one.

The <a> tag in itself will do nothing, and we need attributes to make anything happen. The first one I will talk about is the most important, the "href" attribute. "Href" stands for Hypertext REFrence. It's important to remember the syntax of this tag, so practice it often.

Here's an example of a simple link:

<a href="http://wengerenterprises.com"></a>

There is still nothing displayed when the code is rendered, the same as if we had just put the <a> tag. To display the link, all you do is add the text you would like to be shown between the opening and closing anchor tags. Sometimes on web design forums and between webmasters, the address is referred to as the "link", and the text as the "anchor".

<a href="http://wengerenterprises.com">Beginner Web Design Tutorials</a>

The target attribute allows you to open a page in a new window, using the value "_blank". There are other uses of this attributes, but I will not go into further details right now.

<a target="_blank" href="http://wengerenterprises.com">Beginner Web Design Tutorials</a>

Now, for a little harder stuff. What we've looked at so far are universal links. Universal links include the whole file path, such as http://mysite.com/mypage.html. Now we need to go into relative links. The first type of relative link we will look at is where you have a page (let's call it page1.html) linking to another page (page2.html) in the same folder. You can link page1.html directly to page2.html by using the following link.

<a href="page2.html">Page Two</a>

This can save a little time and energy, especially if the path to your page is something like http://mysite.com/folder1/folder2/folder3/page1.html. However, what if your pages are not in the same folder? Say page1.html's path is http://mysite.com/page1.html, while page2.html's path is http://mysite.com/folder1/page2.html? To link to page2.html from page1.html, we would have to refrence to the folder that page2 was in, like this:

<a href="folder1/page2.html">Page Two</a>

To link to page1 from page2, we have to go up a folder, into it's "parent directory", which just means the folder that contains the folder that you are currently working with. To do this, we use two periods before the slash, instead of the folder name.

<a href="../page1.html">Page One</a>

As if this wasn't hard enough, say that page1.html is still in it's original folder, http://mysite.com, while page2.html is now in the folder I mentioned above, http://mysite.com/folder1/folder2/folder3. Linking to page2.html from page1.html would now have to be done like this:

<a href="folder1/folder2/folder3/page2.html">Page Two</a>

while linking to page1.html from page2.html would be like this:

<a href="../../../page1.html">Page One</a>

We have three sets of double-periods because we have to go up three folders. We must go from folder3 to folder2 (1), from folder2 to folder1 (2), and from folder1 to http://mysite.com (3).

Finally, what if page1.html was in the folder http://mysite.com/folder1, while page2.html is in the folder http://mysite.com/folder2? To link to page2.html from page1.html we would have to include both methods mentioned above - going up into the parent directory from folder1, then coming back down into folder2.

<a href="../folder2/page2.html">Page Two</a>

This finally concludes this long lesson on links. Unfortunately, this is not all you must learn to master this subject. The next lesson deals with even more types of links.