Links

A link, or an anchor, is a word, a group of words or an image you can click to jump to another document or a specific part of the current document. The element for links, both internal and external is as simple as <a>. I’ve talked about abbreviations before and a is an abbreviation of anchor. But you cannot just use <a> - you have to add at least one attribute – the href. Href stand for hypertext reference and the value defines the address you are linking to. The simplest link looks like this:

<a href="http://www.yoururl.com">Link text</a>

Open in a new window

Sometimes you want the user to keep having your webpage open and you have the possibility of determining whether or not a link should open in a new window. To do this, you use the target-attribute.

If you decide to use the target attribute, you should be aware that a lot of people dislike this feature and believes that the user should be allowed to decide for herself whether or not she wants a new window, by right-clicking. Having said this, the attribute/value for opening in a new window looks like this:

<a href="http://www.yoururl.com" target="_blank">This is my link</a>

Link to a specific part of your document

If you want to link to a specific part of your document, this can be done in two ways. Previously, it was done by identifying the place you wanted to link to, an name this place – that would look like this:

<a name="question-2">This</a> is the answer to the second question

This is called a fragment identifier – it identifies a specific fragment of you document. The anchor-element is used to define the place you want to link to and you would also use the fragment identifier when you actually linked to it:

<a href="#question-2">See the answer to question 2</a>

The # indicates that it is a fragment identifier link and the question-2 tells the browser which fragment to look for.

HTML5 suggests using specific id-attributes instead of the name-attribute if they are already available and if they are not, to writ the anchor element a bit different.

Here is an example of using id’s

<p id="my-note">This is my first section, with a unique id</p>
<p>This is just a section – no id’s or anything here</p>

<a href="#my-note">Go to the first section</a>

If there was no id in the paragraph-element, but we still wanted to link to the first section, HTML5 suggests doing it this way:

<p><a name="my-note" />This is my first section, with a unique id</p>
<p>This is just a section – no id’s or anything here</p>

<a href="#my-note">Go to the first section</a>

As you can see, we use the anchor-element if there is no unique id and then close the element in the first tag, as the closing tag is not needed.