HTML Links and Anchors

Link (Anchor) Element (<a></a>)

Links are what connect one page to another on the web. They are used to navigate within a web site or direct people to other sites. Without links there would be no web in "World Wide Web" since you wouldn't have any connection between pages. You can use text or images as a link.

<a href="http://www.webrelatedstuff.com" target="_blank">
    Web Related Stuff
</a>

The "href" attribute is required unless using the <a> to declare an anchor within a page(we'll cover this shortly). The "href" attribute points the link to the address of the page to be opened. A link is pointless without this attribute. There are two kinds of addresses you should know about. Relative addresses and Absolute addresses.

Relative Addresses

A relative address is a way of directing the browser to a file or folder in your web site or on your computer. It is like giving directions to a page in relation to the current page. Since your web files will all be stored in a root or base web folder on a server, a relative address tells the browser how to get there from the page it is on.

Lets consider the directory structure of your web site. All sites will have a root folder that holds all the public files for your site. It is normally called public_html, htdocs or something similar on web servers. In your practice environment it will be named whatever you named the folder holding your practice files. Lets make up a theoretical directory map real quick.

• public_html/
• index.html
• myvacation.html
• images/
• image1.jpg
• image2.jpg
• hobbies/
• golfing.html
• webdesign.html
• guitar.html

You can see that we have our root directory that contains 2 html files, index.html and myvacation.html, and 2 directories (folders). The images folder contains 2 image files and the hobbies folder contains 3 html files. Lets look at how we would link between these files.

Linking to files that reside in the same directory is as simple as just naming the file with the href attribute. To create a link from the index.html page to the myvacation.html page in our example you would use:

<a href="myvacation.html">My Vacation</a>

or

<a href="./myvacation.html">My Vacation</a>
		

The second example is a slightly more proper way to do it. The "./" is like saying "this directory". The reason I point this out even though just listing the file name without "./" works fine in this case, when it comes time to go from one folder into a higher, containing folder you will need to use the dot. Here is what I mean.

Lets say we are linking from a file in the hobbies folder and want to create a link to the "index.html" file and a link to "image1.jpg" in the images folder. Here is how you have to do it:

<a href="../index.html">Index</a>

<a href="../images/image1.jpg">My Image</a>
	

Using 2 dots (periods) tells the browser to go from the current directory, then up into the folder containing it and look for the file there.

Absolute Addresses or URL's

An absolute address points to an exact place on your website or on the internet. This is used when you want to point to a specific address that cant be created relatively or is easier to point to exactly.

If you want to use an absolute path to point to files on your computer or sever, you need to enter the URL that would be in the address bar of a website for that file. This has to be a file within your public root directory.

This tells the browser exactly where on the website to find the file. The most common use of an absolute path is to point to another web site. In this case you use the http address of the site as the href attribute value such as:

	
<a href="http://www.webrelatedstuff.com">WebRelatedStuff</a>
	

Target Attribute

The "target" attribute is used to determine where the linked page should open up. The possible values are:

• _blank
• _self
• _parent
• _top

"_parent" and "_top" deal with opening links when using frames in your web page. We wont be covering frames in this tutorial so we wont be discussing these values. If you are interested in frames and want to explore more check out W3C.org.

_blank

A link with a "target" attribute value of "_blank" will open in a new browser window. This is handy if you want to direct someone to a new page but don't want your page to be navigated away from.

_self

"_self" is the default value of a link if you don't specify a "target" attribute. The "_self" value simply means that the link will be opened in the current window.

In Page Anchors

You can anchor to different parts within a page. If for instance you have a frequently asked questions section where you have a list of questions at the top of the same page the answers are on, and you want to provide a way for visitors to navigate to an answer directly without having to scroll through the whole page you can use an anchor.

To use anchors in your page you need to place an anchor before you can link to it. You do this by placing a <a> tag with the "name" attribute, instead of the "href" attribute, into the section of the page you want to anchor to, such as:

<a name="top"></a>
		

The anchor itself is not visible in the browser display, but the browser knows its there. Then you would link to it by setting the "href" attribute to the name of the anchor preceded by a hash (#) mark like this:

<a href="#top">Go To The Top</a>
		

You can also link to page anchors in other web pages by linking to the page and then following the file name with the hash and anchor name like so:

<a href="myvacation.html#rome">When In Rome</a>