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:

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:

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.

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.