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.