将大型复杂HTML结构定义为链接的最佳实践？

Question

请考虑以下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>

我想将每个lis链接到一个链接.作为概念证明,我给你这个无效的代码:

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

显然,这不会验证,因为我不能在内联元素中包含块级元素.

编辑:事实证明,上面的代码在HTML5中有效.问题解决了.

我需要找到另一个解决方案:

将a标记插入每个块级元素

我考虑添加相同的h2 > a,p.subline > a和div > p > a标签,但我想使用悬停状态:hover会影响链接的整个区域,因此无法正常工作.

使用onclick事件

我之前使用过Javascript来解决这个问题li.onclick = function() { window.location.href = ...,但是后来我无法使用鼠标中键在新窗口中打开.这会影响可用性,取决于Javascript,坦率地说,非常烦人.

使块级元素内联:

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

最有可能的是,display: block需要应用于某些或所有这些跨度以使它们表现出来.

这是有效的HTML,但它真的很糟糕.

有谁知道解决这个问题的最佳方法？

Answer 1

使用 HTML5：

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

HTML5 提供了比 XHTML 更简单的 HTML 思路。老实说，这是非常需要的简化。这些简化之一是能够使用基本 A 元素包装 DIV、H 标签和 P 等块级元素。您没看错：用 A 标签包裹块级元素。

就我个人而言，我从来没有担心过这个问题。是的，它在技术上是无效的，但我喜欢实用验证。