Question

So according to the w3c validation tool, wrapping a div (especially one which floats) with an anchor tag is incorrect markup. Although this works in every browser tested so far (includes most phones and tablets), is there a better way to do this?

I found that you can use the HTML4 < button > with block-level content, which I can use and make work just fine. But what is the correct way to make these into a link? I would prefer to not use javascript for these links.

I considered using a < form > tag with an action, which is a lot of extra markup for such a simple task, but Internet Explorer 6 does not recognize the button as a submit button, so the link is still dead without javascript. To make matters worse, some links should open in a lightbox – with javascript I could just event.preventDefault(), but how do you accomplish this with a form?

Is there a better way to make a link out of block-level elements? Or should I just ignore the validation since this still works in nearly all browsers (if not every single one)?

(Using HTML4, but HTML5 solutions are welcome)

Answer 1

Validators certainly do flag links wrapped around block-level elements in (X)HTML4 as invalid, but this has become something of an artificial use-case. Surrounding a block-level element with a tags is such a common and well-supported practice (even in older browsers) that you really needn’t worry about its invalidity.

The HTML5 spec includes near-arbitrary link wrapping. In other words, you can surround many elements, block-level and inline, with a single pair of a tags and the browser can apply the link target to each element between the tags as it sees fit. Bruce Lawson wrote a nice summary of the changes to link behavior on HTML5 Doctor.