We all know about the
a element and we use it in our work everyday. Every HTML page that we create is likely to have at least one
a element within it. But have you ever looked at the specification for this vital element?
a element is core to the Internet as it allows us to navigate anywhere within it. This one small element 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 element and it turns out to be more powerful than I initially thought.
One major change in the HTML5 specification is the ability to enclose blocks of content within a single
a element. 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 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>
Let’s take a look at the attributes that are currently available to us according to the W3C specification:
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.
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.
The value of the
rel attribute indicates the type of link that the
a element 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
rel attribute is ommitted, then no particular relationship with the referenced document is assumed as it has no default value.
hreflang attribute advises the browser of the language of the referenced document. Its value must be a valid BCP 47 language tag.
type attribute advises the browser on the MIME type of the referenced document. Its value must be a valid MIME type.
download attribute ndicates that the resource is intended to be downloaded for use later rather than used immediately.
Its browser support however is varied.
ping attribute is again listed specifically as an attribute of the
a element 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.
I won’t insult your intelligence by providing some examples on how to use the
a element, 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.