链接在标题中？还是标题在链接中？

Eric Range 通过这篇文章提出一个想法。是将标题标签包裹在锚链接中更好，还是反过来？假设是 HTML5，这两种方式都是完全有效的。

链接在标题中

<h1>
  <a href="#">
    Ten Ways to Have Yourself a Merry Little Christmas
  </a>
</h1>

标题在链接中

<a href="#">
  <h1>
    Ten Ways to Have Yourself a Merry Little Christmas
  </h1>
</a>

那么您会选择哪一种？我认为这取决于情况。

可点击区域

默认情况下，锚标签是一个内联元素，而标题是一个块级元素。因此，在不使用 CSS 进行更改的情况下，h1 > a 的可点击区域是这里显示的浅红色区域

而 a > h1 方法则使得块级标题完全可点击。

CSS 可以轻松地将上面示例中的链接也设置为块级元素，但这将是正常的默认行为。

您可能会认为“可点击区域更大！这很好！”，这没错，但它也会影响到这一点

文本选择友好性

这有多重要，由您决定。但我喜欢从右下角开始选择，而且我一直不太喜欢这种块级链接，原因就在这里

布局怪异

您可以注意这一点，并确保在 CSS 中对此进行处理，但是如果您采用 a > h1 方法，链接上的填充会导致这种情况，这有点奇怪

两个标题，一个链接

如果您需要一个标题和副标题链接在一起（而且您不想使用子 span 或者其他方法来表示副标题），那么包裹在锚链接中可能是一个不错的选择。

<a href="#">
  <h1>Cheese is favorite holiday gift</h1>
  <p class="subtitle">From a one-person survey held in central Wisconsin</p>
</a>

无障碍问题

我不确定，我担心。会有什么问题吗？

获胜者？

我倾向于使用 h1 > a，而且 非正式投票 表明大多数人也是这样认为的。

但是，还是要好好考虑。