将整个 div 设为 link 还是仅将标题设为 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>` in `<h2>` – 将 link 放在标题中，如下所示：

<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 的点击。

优点：

Link 对 Google and/or 可用性辅助设备（例如屏幕阅读器）有明确的目标，而不是 "polluted" 预告文本

缺点：

不在状态栏中显示 link 目标，如果用户没有将鼠标移到标题上

2。 `a` around `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（我认为）。

优点：

状态栏显示link目标
设置简单
可点击区域完全清晰
没有JS

缺点：

Link 文本被预告文本污染，这可能对屏幕阅读器和 SEO 不利

从 usability/SEO/semantic 的角度来看，您会怎么做？

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:

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:

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

将整个 div 设为 link 还是仅将标题设为 JavaScript？

Make entire div a link or only the headline and work with JavaScript?

javascript

html

usability

1。 `<a>` in `<h2>` – 将 link 放在标题中，如下所示：

2。 `a` around `div.teaser` – 整个 div 被放置在一个 `a` 标签内，像这样：

将整个 div 设为 link 还是仅将标题设为 JavaScript？

Make entire div a link or only the headline and work with JavaScript?

javascript

html

usability

1。 <a> in <h2> – 将 link 放在标题中，如下所示：

2。 a around div.teaser – 整个 div 被放置在一个 a 标签内，像这样：

1。 `<a>` in `<h2>` – 将 link 放在标题中，如下所示：

2。 `a` around `div.teaser` – 整个 div 被放置在一个 `a` 标签内，像这样：