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

时间:2011-04-10 23:49:27

标签: html css hyperlink

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

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

<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 > ap.subline > adiv > 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,但它真的很糟糕。

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

4 个答案:

答案 0 :(得分:4)

使用HTML5:

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

  

HTML5比HTML提供了比HTML更简单的思路。老实说,这是一个非常需要的简化。其中一个简化是能够将块级元素(如DIV,H-tag和P)与基本A元素包装在一起。您正确阅读:使用A标记包装块级元素。

就个人而言,我从不担心这一点。是的,它在技术上是无效的,但我是实用验证的粉丝。

答案 1 :(得分:3)

我完全同情你的沮丧。我想你已经总结了问题以及解决问题的常用方法。我已经走了你在各种情况下建议的两条路线。

首先,另一个更有问题的(!)选项。我不会宽恕以下作为最佳做法! ...但您可以将其添加到可能适合有限情况的列表中。

http://jsfiddle.net/peteorpeter/J4sT9/

基本上,如果您可以使用绝对定位和固定高度的大部分内容,您可以将标题作为链接并覆盖其他元素。真的,它非常脆弱和僵硬。你也不能在链接上有背景,否则会掩盖其他元素。

好的,一看到那个烂摊子后,一旦你从口中得到了呕吐的味道,我想你应该:

  • 拥抱您开始使用的精彩语义标记
  • 在某个看起来漂亮且可点击的地方添加一个链接
  • 在JS中,隐藏上面的链接并将点击从<li>发送到隐藏链接
  • 在JS(或CSS 2+)中,增强对<li>
  • 的悬停效果

略有改动的标记:

<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>
        <a class="link-for-no-JS" href="buystuff">Item 1</a>
    </li>
    <!-- More ... -->
</ul>

那里没有任何开创性的东西,只是基本的渐进式增强。功能较少的浏览器必须寻找链接并且可能无法获得任何悬停效果(但它仍然可以是一个漂亮,可用的界面);拥有更高级浏览器的人们可以获得更直观,更灵敏的体验。

答案 2 :(得分:1)

过去我通过将链接放在标题中然后使用Javascript将其传播到li来解决了这个问题。这样大多数人都能获得理想的效果,如果JS关闭,它无论如何都会起作用。当您传播链接时也设置一个类。这是一个额外的复杂性,但它是有效的HTML。取决于你的优先事项。

// psuedocode
on document ready {
   els = getElementsByClassName("mylinks")
   for el in els {
      li = el.parentNode.parentNode;
      li.onclick = function() {window.location = el.href}
      li.className = "liHover";
   }
}

答案 3 :(得分:0)

还有另一种黑客可以根据情况发挥作用。使用aposition: absolute元素从自然渲染流中拉出,并使其高度和宽度足以覆盖相关区域。高z-index值也可以派上用场。这是一个黑客。