将整个div设置为链接还是仅作为标题并使用JavaScript？

想象一下，一个包含相关文章的博客显示了一点类似这样的笑话：

<div class="teaser">
    <h2>Fancy article</h2>
    <p>In this awesome article, I talk about the virtues of HTML and JavaScript.</p>
</div>

这是有效的，因为HTML5（我认为）

优势：

• 状态栏显示链接目标
• 简易安装
• 可点击区域完全清晰
• 没有JS

缺点：

• 链接文本被挑逗性文本污染，这可能对屏幕阅读器和SEO造成不利影响

---

从可用性/搜索引擎优化/语义的角度来看，你会怎么做

我更喜欢选项2。但是请记住，

a

是一个

inline

元素，其中

div

h2

和

p

是块元素

因此，在添加更多样式之前，应将

设置为块元素的

。从HTML5的角度来看，它是完美的

a{
边框：1个实心番茄；
}
a、 块状链接{
显示：块；
}

让标题看起来像一个链接并不难或不常见。如果您在文章内容中放置了任何链接，并且

不属于

内部，则不能使用

#2

，这对于HTML5是不正确的。你可以把

p

放在

a

里面。请查看我的答案，以获得更详细的解释和w3c的引用。到目前为止，非常感谢，但是对于SEO和屏幕阅读器的影响如何？想法？我认为应该考虑在链接中添加标题属性。

<div class="teaser">
    <h2><a href="fancy-article/">Fancy article</a></h2>
    <p>In this awesome article, I talk about the virtues of HTML and JavaScript.</p>
</div>

<a href="fancy-article/">
    <div class="teaser">
        <h2>Fancy article</h2>
        <p>In this awesome article, I talk about the virtues of HTML and JavaScript.</p>
    </div>
</a>