Any-Element Linking in HTML 5 (sort of)

A while ago, Eric Meyer suggested that HTML 5 should allow any element to turn into a link by taking an href attribute – see his Any-Element Linking Demo. I suggested that, as a stop gap, HTML 5 should legalise the fact that all the big five browsers already allow the a element to surround multiple elements and block level elements.

I’m delighted to report that my fellow Opera lovegod, Anne van Kesteren, tells me that HTML 5 now legalises this behaviour. So instead of coding a news “teaser” like this:

<h3><a href="story.htm">Bruce Lawson as Obama's running mate!</a></h3>
<a href="story.htm"><img src="bruce.jpg" alt="lovegod" /> </a>
<p><a href="story.htm">In answer to McCain's appointment of MILF, Sarah Palin, Obama hires DILF, Bruce Lawson, as his running mate. Read more!</a></p>

you can say:

<a href="story.htm">
<h3>Bruce Lawson as Obama's running mate!</h3>
<img src="bruce.jpg" alt="lovegod" />
<p>In answer to McCain's appointment of MILF, Sarah Palin, Obama hires DILF, Bruce Lawson, as his running mate. Read more!</p>

You can’t nest anchors (“there must be no interactive content descendant”) because that wouldn’t be compatible with current browsers.

2022 can’t come soon enough!

(Of course, you can do this now; that’s kind of the point with lots of the HTML 5 spec.)

Added 2 October: something’s missing

What I can’t believe I didn’t notice until today is that the HTML 5 spec doesn’t handle making rows in tables into links. Ironically, this was Eric’s original use-case—and the main feature of his demo. I noticed it when looking at the WHAT-WG‘s FAQs for something else.

Presumably, it’s not in the spec because it’s not backwardly compatible. Bugger.

7 Responses to “ Any-Element Linking in HTML 5 (sort of) ”

Comment by trovster

Although this is nice, as it’s a good behaviour in some cases, do you think users will understand what is happening? I know they’ll work it out eventually, though.

Currently, I solve this with JavaScript, with a quick jQuery plugin I’ve written. Although, my test-case is not live yet. You can view the code at though, it’s not been thoroughly tested as I refactored it recently. The actual trigger might not currently work. Not sure why but the trigger doesn’t work, so I have to use the window.location which is currently commented out.

Comment by Dave

Does the image even need alt text in this case? Presumably there’s no information carried in the image, unless the point of including the image is to make some comment about the appearance of Bruce, which is actually covered in the article with the word “DILF”.

Comment by Bruce

You see, I expected you to all be on my case for not using the abbr element to spell out what “DILF” stands for, not harrass me about the alt text, which was a typo. It should say “love God!”. As an American vice-presidential candidate I have to feign religious belief, and command others to do the same.

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.