将整个div设为链接或仅使用标题并使用JavaScript？

Question

想象一下，博客上的相关文章会显示一些像这样的预告片：

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

如果你想允许点击整个预告片，你会采用哪种方法？

1。 <a>中的<h2> - 将链接放在标题中，如下所示：

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

并在点击预告片中的任何内容时触发通过JS点击链接。

优点：

• Link为Google和/或可用性辅助设备（例如屏幕阅读器）设定了明确的目标，并且没有使用预告文字“污染”

缺点：

• 如果用户未将鼠标移到标题上
，则不会在状态栏中显示链接目标

2。 a周围的div.teaser - 整个div都放在a标记内：

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

自HTML5（我认为）以来这是有效的。

优点：

• 状态栏显示链接目标
• 轻松设置
• 可点击区域完全清晰
• 没有JS

缺点：

• 链接文字被预告文字污染，这可能对屏幕阅读器和搜索引擎优化原因不利

从可用性/ SEO /语义角度来看，你会做什么？

Answer 1

我更喜欢选项2.但请注意，a是inline元素，其中div h2和p是块元素。

因此，在添加更多样式之前，应将a设置为块元素。从HTML5的角度来看，它非常精致。

a {
  border: 1px solid tomato;
}

a.blockyLink {
  display: block;
}

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

<br /><br />

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

Here's what W3C says:

  

只要在其中没有交互式内容（例如按钮或其他链接），a元素可以围绕整个段落，列表，表格等，甚至整个部分。此示例显示了如何将整个广告块用于链接：

<aside class="advertising">
 <h1>Advertising</h1>
 <a href="http://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="http://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>