Link

←Back to listing

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?

The humble 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.

Surround

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 element.

<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 element 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 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

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 element 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 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.

Conclusion

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.