在 HTML 文档中创建链接标记的最佳实践是什么？答案

【问题标题】：What are the best practices for creating linked markup in HTML documents?在 HTML 文档中创建链接标记的最佳实践是什么？
【发布时间】：2013-03-24 13:20:59
【问题描述】：

我已经看到了几种在 HTML 文档中创建可点击区域或元素组的不同方法。

一种方法是将一堆元素包装在一个锚标记中并使其显示块。然而，有些人认为这在语义上是不正确的。另一种方法是使用 JavaScript，但如果不小心操作，可能会因为禁用中间单击和右键单击而破坏用户体验。

【问题讨论】：

这种情况很少见，如果您遇到需要在链接中包装多个元素的情况，我会说去吧，正如您所说，javascript 只会带来很多对表格进行额外和不必要的工作，并可能降低用户体验，同时包装它会在最坏的情况下降低您的语义。
对于某些客户来说，SEO 是一笔巨大的交易，如果它有影响，我会谨慎行事。我想出的最好的方法是将“nofollow”添加到随机链接中，这些链接在语义上不应该包含这些元素。 nofollow 属性如何与嵌套锚点一起使用，它们甚至是有效的标记吗？
这是征求意见和讨论，还是涉及建设性问题？

标签： javascript html semantics

【解决方案1】：

W3 说：

（编辑：链接会很好...dev.w3.org）

只要其中没有交互式内容（例如按钮或其他链接），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>

所以，如果您没有互动内容，请使用<a>；否则，请使用 JavaScript。无论如何，这是我的看法。

此外，我还要断言，因为<a> 具有文本级语义，所以任何不是文本的内容都应该使用JavaScript 而不是<a> 进行点击。也就是说，很多人写例如<a href="..."><img ...></a>，而且图像肯定不像文本。所以这充其量只是一个模糊的话题。

【讨论】：

在上面的示例中，H1 和 P 标签是块级别的，并且锚点环绕这些标签。我还通过锚点是内联元素，不应该包装块级元素。
我也有同样的想法，但是阅读我链接的 W3 文档后，我了解到<a> 现在被认为是“透明的”，这意味着它采用了其父元素的内容模型。本质上，您可以在 <a> 中放入任何内容，只要这些内容在没有 <a> 的情况下自行有效。