Best practice to define a large, complicated HTML structure as a link?

Question

Consider the following HTML:

<ul>
    <li>
        <h2>Item 1</h2>
        <p class="subline">Meta information bla bla</p>
        <div class="description">
            <p>Paragraph one</p>
            <p>Paragraph two</p>
        </div>
    </li>
    <!-- More ... -->
</ul>

I'd like to link each of the lis to a link. As proof of concept, I give you this invalid code:

<ul>
    <li>
        <a href="http://www.google.com/search?q=test+1">
            <h2>Item 1</h2>
            <p class="subline">Meta information bla bla</p>
            <div class="description">
                <p>Paragraph one</p>
                <p>Paragraph two</p>
            </div>
        </a>
    </li>
    <!-- More ... -->
</ul>

Obviously, this won't validate because I can't have block-level elements inside inline elements.

EDIT: As it turns out, the code above is valid in HTML5. Problem solved.

I need to find another solution:

Insert an a tag into each block level element

I considered adding identical h2 > a, p.subline > a, and div > p > a tags, but I'd like to have a hover state using :hover that affects the whole area of the link, so that won't work.

Using an onclick event

I have used Javascript to solve this problem before (li.onclick = function() { window.location.href = ...), but then I can't use the middle mouse key to open in a new window. This affects usability, depends on Javascript, and is, frankly, super annoying.

Making the block-level elements inline:

<ul>
    <li>
        <a href="http://www.google.com/search?q=test+1">
            <span class="title">Item 1</span>
            <span class="subline">Meta information bla bla</span>
            <span class="description">
                <span>Paragraph one</span>
                <span>Paragraph two</span>
            </span>
        </a>
    </li>
    <!-- More ... -->
</ul>

Most likely, display: block would need to be applied to some of or all of those spans to make them behave.

This is valid HTML, but it's really kind of awful.

Does anyone know the best way to tackle this problem?

Answer 1

Use HTML5:

http://davidwalsh.name/html5-elements-links

HTML5 presents a simpler line of thought with HTML than XHTML. And quite honestly, it's a much needed simplification. One of those simplifications is the ability to wrap block-level elements like DIVs, H-tags, and P's with basic A elements. You read that correctly: wrap block-level elements with A tags.

Personally, I've never worried about this. Yea, it's technically invalid, but I'm a fan of pragmatic validation.