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)
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.