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>. Ive 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 ids

<p id="my-note">This is my first section, with a unique id</p>
<p>This is just a section  no ids 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 ids 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.