How to Create Hyperlink DIV Elements

Today, I encountered a problem: making div element a hyperlink. For example:

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

It works, but SHOULD NOT be used. Because it is against the web law: W3C (X)HTML specifications!

A very basic (and valid) solution:

div a { display: block; height: 100%; }
<div><a href="">content</a></div>

However my case was a little bit more difficult:

<a href="">
	<div id="first">
		<div>some content</div>
		<div>some other content</div>

We already know that is not a valid layout. Because a block element (div) is used in an inline element. If I change layout, a have to insert hyperlink tags (a) in all block elements, and the background of the “first” div element will not be clickable. So here comes the solution:

a { display: block; }
a span { display: block; }
<a href="">
	<span id="first">
		<span>some content</span>
		<span>some other content</span>

It’s done! And it’s VALID!