An "a" element around a "div"

I know the topic of having an inline element around a block-level element as being semantically invalid has been discussed here at length.

However, the situation of putting an "a" element开发者_StackOverflow社区 around a "div" seems unescapable whevener you want to... well... put a link around a box (with CSS-defined width and height for instance). That looks like a very common situation and there's absolutely nothing wrong with the rendering.

But how to do this while staying semantically correct?

I'll note that

<a href=""><div>...</div></a>

is perfectly valid HTML5.

Add a Javascript onclick event handler on the div element

<div onclick="window.location='http://www.google.com';" > </div>

Or what if you make the div an inline element

   <div style="display:inline;"></div>

or make the a display as block

<a style="display: block;" > </a>