Links

In all likelihood, the first web page that was ever created contained a link to the second ever web page. To place a link on a page, we use the anchor tag <a>.

The <a> tag and attributes

If we simply place some text inside an <a> tag, nothing will really happen when you click on it, unless you program the event in JavaScript. However, you can tell from the way it looks on the screen that the intent is for it to be a link. By default, the content of an <a> tag is rendered in the (by now probably notorious) underlined and blue style.

<a>Click here</a>

The href attribute

To make the link work, you need to use the href or hypertext reference attribute. You can link to another web page, external or local, a document or image, or another section of the current page. Here are some examples:

<a >Visit our website</a>
<a href="index.html">Home</a>
<a href="pdfs/manual.pdf">Click here to download the manual</a>
<a href="#top">Go back to top </a>

The first three examples should be self-explanatory. There is a complete URL, a single file name, index.html, and a relative path to a PDF file. Absolute pathnames are supported but their use is not recommended. The last example requires more explanation. Did you notice the sharp sign?

The <a> name attribute

The name attribute when used in conjunction with the <a> tag can be used to name a particular spot on the page. That name can then be used elsewhere on the page in a link.

So, you could put this somewhere near the top of your page:

<a name="top"></a>   <!-- note that there does not have to be any content  -->

A link somewhere else on the page, using the same name, but preceded with a # sign, will take us back there:

<a href="#top">Back to top </a>

The <a> target attribute

When a user clicks on a link and arrives at a new page, they sometimes want to go back to where they came from. Some devices and most browsers feature a back and even forward button a visitor can click on only to discover that the browser does not always take them back to the page they expect. Or the button may not have any effect at all.

In the second half of the book, we will spend an entire chapter on this topic and the notion of what a previous page should really be. For now, you can help your cause and your visitor by adding the target attribute to your anchor element. It allows you to determine whether or not the target page (hence the name of the attribute) will open in a new browser window or not. There are four options:

• target="_blank": This page opens up in a new window or tab
• target="_self": This page opens in the same window it was clicked in; this is the default but also sometimes means that you created a point of no return
• target="_top": This page opens in the full window size of the browser
• target="_parent": This page opens in the parent window