Link
We all know about the <a>
tag and we use it in our work everyday. Every HTML page that we create is likely to have at least one <a>
tag within it. But have you ever looked at the specification for this vital element?
The humble <a>
tag is core to the Internet as it allows us to navigate anywhere within it. This one small tag allows us to link, and therefore navigate to, pages, files, resources, etc. throughout the Internet. It helps bind things together.
In this article I will simply take a look at what the specification has to say about this vital tag and it turns out to be more powerful than I initially thought.
Surround
One major change in the HTML5 specification is the ability to enclose blocks of content within a single <a>
tag. Before this was valid, if, for example, a div
, contained various bits of content that were to link to a resource, then each one would have to be linked individually.
With HTML5, the entire content block can now be enclosed by an <a>
tag.
<a href="border-terrier.html">
<div class="box">
<h2>Border Terrier</h2>
<img src="border-terrier.jpg" alt="An image of a Border Terrier" />
<p>The Border Terrier is a much loved and hardy breed of dog that makes an ideal family pet.</p>
</div>
</a>
Attributes
Let’s take a look at the attributes that are currently available to us according to the W3C specification:
href
The href
attribute contains a valid URL which contains the link’s destination. This can be an absolute URL to an external location, a relative link to another documet on the same server, or a # followed by the id of another HTML element on the same page.
When this attribute is missing, then the <a>
tag itself is not actually a hyperlink and the target, rel, hreflang and type attributes must be omitted.
target
If present, the value of the target
attribute should be a valid browsing context name, or one of the following special keywords:
- _blank – open in a new window
- _self – open in the same window (default)
- _top – open in the top window (if in a iframe)
- _parent – open in the parent window (if contained in an iframe)
And the other value that I often see used, _new (which has the same effect as _blank) isn’t even in the specification and therefore shouldn’t be used.
rel
The value of the rel
attribute indicates the type of link that the <a>
tag creates. It is a space separated list of keywords which are listed below:
- alternate – links to an alternate representation of the current document
- author – links to the author of the current document or article
- bookmark – permalinks to the nearest ancestor section
- help – links to context sensitive help
- licence – links to a licence document under which the current document content is covered
- next – links to the next document in a series (of which the current document is part of)
- nofollow – indicates that the current document or it’s author doesn’t endorse the referenced document
- noreferrer – informs the browser not to send a HTTP referrer header is the link is followed
- prefetch – indicates that the referenced document should be pre-emptively cached
- prev – links to the previous document in a series (of which the current document is part of)
- search – links to a resource that can be used to perform a search on the current document and its related pages
- tag – provides a tag that applies to the current document
If the rel
attribute is ommitted, then no particular relationship with the referenced document is assumed as it has no default value.
hreflang
The hreflang
attribute advises the browser of the language of the referenced document. Its value must be a valid BCP 47 language tag.
type
The type
attribute advises the browser on the MIME type of the referenced document. Its value must be a valid MIME type.
download
The download
attribute ndicates that the resource is intended to be downloaded for use later rather than used immediately.
Interestingly the W3C specification on the <a>
tag doesn’t specifically reference the download
attribute, although it is described elsewhere, whereas the WHATWG specification does.
Its browser support however is varied.
ping
The ping
attribute is again listed specifically as an attribute of the <a>
tag in the WHATWG specification and elsewhere in the W3C specification, and allows you to provide a space separated list of valid URLs that want to be notified if the user follows the link.
Both Chrome and Safari support the ping
attribute as does Firefox where it’s turned off by default.
Update:
Back in , the W3C decided to remove the ping
attribute from the HTML5 specification. This means that the W3C specification is currently inconsistent as the attribute is referred to elsewhere in the specification as mentioned above. A bug has been filed for this. The WHATWG specification on this subject therefore is out of date.
Conclusion
I won’t insult your intelligence by providing some examples on how to use the <a>
tag, but as you can see it’s a bit more powerful than perhaps you otherwise thought. I do hope that you will start using some of the attributes mentioned here, especially type
which provides more semantic information on the resource being linked to within the element itself, I know I will.