Links

Create a link using the `<a></a>` element. An user can click on anything between the opening `<a>` and closing `</a>`, even images! Using the `href` attribute, you specify where you want to link to. It looks like this:

<a href="http://it2805.github.com">IT2805</a>

The value of the `href` attribute is called an URL. URL is short for Uniform Resource Locator, and says where the resource is located. You can read more about URLs, and their superset URIs, in chapter 5.

Absolute URLs

When linking to other sites, you need to use the full web address, starting with http://. This is known as an absolute URL. If you use the absolute URL, you will be taken to the same page, no matter where you are linking from.

Relative URLs

When we are linking to pages within our own web site, you should use relative URLs. Instead of describing the full URL, you use the shorthand notation to say where a resource is, relative to where you are linking from. This has an advantage when you are developing a site locally on your computer, as you do not need a domain name.

In the file hierarchy below we want to link from index.html to starblaster.html.

• products

  • starbaster.html

• index.html

We would then have to write:

<a href="products/starblaster.html">Starblaster</a>

If we want to link from starblaster.html to index.html, we would have to write:

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

Notice the ../. This indicates that the path is one folder up. Should we need to go two folders up in the hierarchy, we would write ../../.

For both relative and absolute URLs, the URLs must be exact, or else the resource will not be found.

Linking to a specific part of the same page

We have now talked about how to link to other pages or resources. What if we want to link to something on the same page? Say you have a table of contents for a long page, and you want to link to the corresponding sections.

You do this by linking to the `id` of those paragraphs. `id` is an attribute you can set on opening tags. They do not magically appear though, you have to make them. In the case of creating a table of content, a good practice would be to add the `id` attribute in your headings, e.g. `<h2>`. The value of the `id` attribute should start with a letter or an underscore (not a number or any other character) and, on a single page, no two `id` attributes can have the same value.

To link to an element that uses an `id` attribute you use the <a></a> element, but the value of the href attribute starts with the # symbol, followed by the value of the id attribute of the element you want to link to. You can see the how it is done in the example below.

<a href="#summary">Summary</a>

<h2 id="summary">Summary</h2>

Clicking the first link would make the browser scroll down to where the title summary starts.

If you want to link to a specific part of another page, you add the id value, starting with the # symbol, after the address. E.g.:

<a href="http://it2805.github.com/html#specificpart">Linking to a specific part of the same page</a>

Opening links in a new tab

If you want to open a link in a new window, you can use the target attribute on the opening <a> tag. The value should then be _blank. E.g.:

<a href="http://it2805.github.com" target="_blank">NTNU</a>

One of the most common reasons a link would open in a new tab is if it points to another website. In such cases, we hope the user will return to our site after finishing looking at the other one.

As a good practice, only open links in a new tab when you have to, and when it is meaningful to do so.

Email links

To create a link that starts up the user's email client, and addresses an email to a specified email address, you use the <a> element and the href attribute. However, this time the value of `href` starts with mailto: followed by the email address. E.g.

<a href="mailto:[e-mail]">Email example</a>