在HTML中，应该阻止级别元素始终包装<a> tags?</a>

Question

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

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

是这个

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

注意：我要采用后一种方法来确保应用正确的样式（我正在使用遗留代码，这对于这一个元素不值得重新工作），但在这样做时我感兴趣的是知道社区的观点是什么。

是的，我已阅读此问题In HTML which way round should a and h1 be nested?，但我不确定是否有适用于<h3>代码的不同或更灵活的规则。

接受以下评论并再次查看代码，我有两种可能的解决方案：

1. 用<h3>元素包裹<a>个元素（HTML5中的确定）
2. 将.class a添加到CSS，以便它继承父div样式，如下所示：

HTML

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

CSS

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

Answer 1

在此上下文中，绝对允许a元素包含h3元素，至少根据HTML5。

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

This is the page in the HTML5 spec指定了这一点。不幸的是，理解它需要一点解释......

Answer 2

请注意，HTML5中有一个案例

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

会有效，但

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

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

<hgroup>元素只能有<h?>个子元素，因此<a>元素的透明内容模型允许<h3>成为其子元素，{{1 }}元素作为<a>的子项保持无效。

在这种情况下

<hgroup>

和

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

是唯一有效的安排。

Answer 3

两者都可以

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

Answer 4

在HTML 4.01和XHTML中，h3代码可能包含a代码，但不是相反。

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