css - 在 HTML 中，块级元素是否应该总是包裹 标签？

Question

在 HTML 中，块级元素是否应该总是包裹<a>标签？如果标签需要包装块级元素以确保应用正确的样式怎么办？例如这可以

<h3><a href="/">Your Header</a></h3>

成为这个

<a href="/"><h3>Your Header</h3></a>

注意：我将采用后一种方法来确保应用正确的样式（我正在使用不值得为这个元素重新工作的遗留代码），但是在这样做时我很想知道社区的意见是。

参考下面的评论并再次查看代码，我有两种可能的解决方案：

HTML

<div class="class">
    <h3><a href="/">Your Header</a></h3>
</div>

CSS

.class, .class a {
    width:296px;
    height:46px;
    overflow:hidden;
    color:#FE5815;
}

score 9 · Accepted Answer

在这种情况下，绝对允许a元素包含该h3元素，至少根据 HTML5。

a元素被称为“透明”元素：它可能包含其父元素可能包含的任何内容。唯一的标准是它可能不包含任何其他“交互式”内容，例如其他a元素、button元素、iframe元素。在这种情况下，假设第一个版本是允许的，那么在 HTML5 下也允许第二个版本。

这是 HTML5 规范中指定这一点的页面。不幸的是，需要一点解释才能理解...

score 2 · Accepted Answer

请注意，在 HTML5 中有一种情况

<h3><a href="/">Your Header</a></h3>

将是有效的，但是

<a href="/"><h3>Your Header</h3></a>

不会，那是元素的父<h3>元素是<hgroup>元素的时候。

该<hgroup>元素只能有<h?>子元素，因此，虽然元素的透明内容模型<a>允许<h3>成为其子元素，但该<a>元素作为的子元素仍然无效<hgroup>。

在这种情况下

<hgroup>
  <h3>
    <a href="/">Your Header</a>
  </h3>
</hgroup>

和

<a href="/">
  <hgroup>
    <h3>Your Header</h3>
  </hgroup>
</a>

是唯一有效的安排。

score 1 · Accepted Answer

两个都可以

<h3><a href="/">Your Header</a></h3>


<a href="/"><h3>Your Header</h3></a>

但是，如果我不在乎锚中的任何内容，我会使用第一个，我只是希望它看起来像<h3>

如果我担心锚需求的特定部分，我将使用第二个<h3>。为了

下面的例子我需要第二个。

<a href="/"> check normal text <h3>check large text</h3></a>

score 1 · Accepted Answer

在 HTML 4.01 和 XHTML 中，h3标签可能包含a标签，但反之则不然。

在 HTML5 中，这两种方式都有效。如果a标签包含h3标签，则a标签不得嵌套在不能包含元素的h3元素中。

css - 在 HTML 中，块级元素是否应该总是包裹标签？