Wednesday 19th August 2009
W3C have finally managed to sort out the existing shortcomings of the <a> element in the new HTML 5 specification. Here's what the new spec says:
"The <a> element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link"
In HTML 4.01, if you wanted to mark up a list style nav with a heading, thumbnail, short description and "More..." link, you might use markup like this:
<a href="link.html"><img src="image.png" alt="Alt text" /></a>
<p>Short description <a href="link.html">More</a></p>
There are several problems with the above:
In HTML 5, we can markup the link as follows:
<img src="image.png" alt="Alt text" />
<p>Short description <span>More</span></p>
As you can see: not only is this code shorter and cleaner, its also makes the entire list element into a clickable link. this makes a lot more sense from a user interface point of view, and makes the code much more usable for those using assistive technology (such as screen readers) to access this code.