Turn a collection of headings, paragraphs and lists into one hyperlink

Is there a valid non js way to turn a collection of headings, paragraphs and lists into one url? (like in advertisements?)

<a href="http://www.example.com" class="allclickable">
      <h2>Fresh Bread</h2>
      <p>Delivered to your door</p>
      <ul>
          <li>Daily</li>
          <li>Fresh&开发者_开发知识库lt;/li>
          <li>Bread</li>
      </ul>
</a>

This does not validate and I do want the href to be display as block element (so also the space around the text is clickable).

Cheers

Might be a less ugly way to do this but:

HTML:

<div id="wrapper">
<h2>Fresh Bread</h2>
...
<a class="allclickable" href="http://www.example.com"></a>
</div>

CSS:

#wrapper { position: relative; }
.allclickable { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

Basically you just pust the link over the stuff. Only downside is that the text underneath is unselectable. But it's valid :).

Of course you will have a problem with IE, see solution here: problem with z-index of an empty div layer in IE8

Use html5. In html5 this is allowed.

But be aware that some browsers will generate a different DOM where they will remove the link and place it inside every block element. So

<a><h3>header</h3><p>para</p></a> 

will become

<h3><a>header</a></h3><p><a>para</a></p>.

Not that big of a deal, but it might mess up some CSS selectors.