Question

我有一个html块，我想充当可点击链接。在下面的代码块中，我想将整个div变成一个链接。

<div id="clickableLink">
    <h3>Link Heading</h3>
    <img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>

HTML5允许在锚标记中包围html（我认为）。见下文

<a href="goThere.html">
    <div id="clickableLink">
        <h3>Link Heading</h3>
        <img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
    </div>
</a>

然而，这对我来说似乎不对。屏幕阅读器等软件如何描述链接。

我还考虑了以下CSS技巧。我将HTML改为

<div id="clickableLink">
    <h3>Link Heading</h3>
    <img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
    <a href="goThere.html"></a>
</div>

然后使用CSS来设置链接的样式以覆盖整个div。见下文：

#clickableLink {
    position: relative;
    width: 100px;
    height: 200px;
    z-index: 0;
}

h3 {
    z-index: 0;
}

img {
    z-index: 0;
}

a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 200px;
    z-index: 1;
}

除了IE之外，这在所有浏览器中都能很好地工作。还有其他人有什么建议吗？

Answer 1

你的第一种方法实际上是最好的。要描述您的链接，您应该使用a元素的属性，例如title，alt以及您想要使用的任何WAI-ARIA标记。无论如何，这都是良好的行业惯例，允许您将内容包装在a标记中，而不必担心可访问性。

Answer 2

允许旧浏览器正确呈现它（并确保其验证）的是在内联元素中使用固有的内联元素。换句话说，块级元素不能放在内联元素中（根据HTML，而不是CSS可能赋予元素的值）。然后，您可以使用CSS使跨度行为类似于块级别。因此标记很容易：

<a href="goThere.html">
    <span id="clickableLink">
        <span class="headerthree">Link Heading</span>
        <img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
    </span>
</a>

如果您声明A是块级别，那么您甚至不需要跨度。这里的问题是你失去了使用Header元素的SEO。所以......

最好的事情可能就是让你为HTML5做好准备，就像你上面所说的那样，即使它看起来是错误的。为了帮助SEO和屏幕阅读器，使用标题标签来“描述”锚点。代码将验证正常。然后，确保您的A显示：阻止，我认为旧浏览器也会将其渲染为正常。

如何添加锚标记<a> to a block of html?</a>

2 个答案: