在HTML中，块级元素是否应该始终包含<a>标签？

Question

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

<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. 使用<a>元素包装<h3>元素（在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;
}

- br3w5

---

你发帖询问的那个答案是正确的。它适用于任何标题元素，很可能也适用于任何块级元素。 - Cfreak

@Simon André Forsburg - 它们相似但并不完全相同。我更感兴趣的是关于将h3元素用a元素包装以启用正确的CSS应用的观点。 - br3w5

可能是重复的问题：在HTML中，<a/>和<h1/>应该如何嵌套？ - Jukka K. Korpela

这显然是一个重复的问题。没有理由期望 h3 在这方面与 h1（或其他块级元素）不同；如果您查看旧答案及其参考资料，这一点就变得很明显了。 - Jukka K. Korpela

@Jukka K. Korpela - 这个问题不仅涉及到'a'和'h3'标签的使用，还涉及到在处理遗留代码时使用它来确保应用正确的样式。 - br3w5

Answer 1

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

这是 HTML5规范中的页面，它需要一些解释才能理解...

- lonesomeday

---

今天我学到了一些东西！ - ajm

Answer 2

请注意，HTML5中有一种情况需要注意。

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

这将是有效的，但是

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

当 <h3> 元素的父元素是 <hgroup> 元素时，<a> 元素不能作为其子元素。因为 <hgroup> 元素只能包含 <h?> 子元素。虽然 <a> 元素在透明内容模型中可以将 <h3> 作为其子元素，但它仍然无法作为 <hgroup> 元素的子元素而存在。在这种情况下，

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

并且

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

只有这些是有效的安排。

- Alohci

Answer 3

在HTML 4.01和XHTML中，h3标签可以包含一个a标签，但反过来不行。

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

- Spectre87

Answer 4

两个都可以

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

- Narendra

---

这是使用h3元素的可怕示例。你不应该仅仅为了获得样式效果而使用标题元素。 - Alohci

我知道，这只是一个场景的例子。更合适的例子是<a href="/"> 你好<b>Alohci</b></a>。 - Narendra