Fix for content block contents using anchor tags in Firefox> = 3.5

Question

Anchor tags are historically only allowed to contain embedded content.

HTML5 specifically allows you to bind tags to content at the block level, and modern versions of Opera / Chrome / Safari correctly implement this behavior, but Firefox does not.

This problem was previously identified by others in SO , and probably the best solution is to include only the default tags inside the built-in tags and then create them display:block in CSS, but this prohibits the use of new html5 tags inside anchors.

Does anyone have a fix for Firefox that allows the following to display correctly in Firefox?

 <a href="some/page.html"> <article> <section> <p> Lorem ipsum... </p> </section> ... </article> </a> 

If there is a better way to structure html to achieve the same goal, that would be ideal, but a CSS based solution or even a vanilla JavaScript solution would be great.

Obviously, there are many ways to make a div accessible as a link using Javascript and onclick , but this hides the purpose of the link and loses some of the semantic markup value.

Answer 1

Just use unobtrusive javascript to add the onClick handler to the display anchors: a block containing the elements of the block. Do not modify your HTML5.

FYI, this is fixed in Firefox 4 beta (full HTML5 parser implemented.)

Answer 2

One way to crack this job is to wrap the contents inside the anchor with a span element. So your code will look like this:

 <a href="some/page.html"> <span> <article> <section> <p> Lorem ipsum... </p> </section> ... </article> </span> </a> 

This, of course, is not valid HTML5, but if you really need to make it work, this hack should do it.