Semantic uses of <a> HTML tag

What is it for?

<a> tag in HTML stands for ‘anchor’ and is used for marking up hyper links to other web resources.

Links can reference another HTML page or point to a particular section of the current web page through use of id or name attributes.

Muddy areas

href attribute with in the <a> tag specifies the location of a web resource and (according to the HTML4.01 specification) can be left empty, so that a script of some sort can add this value.

The exact quote is:

Authors may also create an <a> element that specifies no anchors, i.e., that doesn’t specify href, name, or id. Values for these attributes may be set at a later time through scripts.

This is an interesting aspect of the specification as it leaves room for many different functional requirements which are often present in Web2.0 type interfaces which rely heavily on JavaScript.

For accessibility purposes though, this aspect of the specification does not make much sense, as user interfaces ultimately ought to work without presence of any scripting whatsoever and this would leave anchors without an href useless and inaccessible.

I would therefore discourage developers from using empty anchors in their web sites.

Content as code

There were number of discussions on the web about the most appropriate ways of linking to web pages.

There are numerous usability guidelines on how to best write content to be displayed within links.

There are also those developers who believe that each link should have a title attribute present within it, which is wrong, as title attribute only ought to be used on links which do not have descriptive enough content within them.

However, if you follow usability guidelines and only use link text with descriptive content, then you should not need to use a title attribute along with your <a> tags.

Having written this, within Web2.0 context, it has become a de facto standard to use title attribute within a list of links containing a gallery of images, where title contains a caption for each main image to be displayed.

I don’t see anything particularly wrong with this approach and would therefore encourage it.

Link content is almost code within the reams of semantic web, as search engines like Google have been built upon following links and using their content in order to rank various web sites (of course this is only one of many aspects which Google takes into account and search engine optimisation deserves another whole book’s worth of explanations).

Jakob Nielsen has also come up with interesting research from usability perspective on how the first 11 characters of the anchor text are enough for users to work out where the given link is going to lead to (see: First 2 Words: A Signal for the Scanning Eye).

All of this is part of good, semantic coding practices.

Further considerations

With emergence of micro blogging, services such as TinyURL have become incredibly popular, creating shortened versions of a link to longer versions of the (original) link.

Best practice for dealing with these types of links is to use the rel attribute and give it a canoncial value.

For example:

<a href="http://tinyurl.com/d9oxbs" rel="canonical">http://tinyurl.com/d9oxbs</a>

It is also interesting to observe that the above outlined practices are not usually followed in these circumstances due to various system restrictions, hence canoncial is required in other to signify that the shortened link’s only purpose is to save some valuable space on a typical Twitter message for example.

This attribute can also be used in order to denote those web resources which have a different URL, but underneath are acutally the same resource.

Further reading

Official Google Webmaster Central Blog: Specify your canonical

Written by Jason Grant, BSc, MSc on 15th April 2009

You can leave a response, or trackback from your own site.