将h3嵌套在锚点内——这是有效的吗？

Question

<li class="vcard">
  <a class="url" href="/about/us/">
    <img class="photo" alt="some" src="/img/nicething.png">
    <h3>hello</h3>
  </a>
  <p class="role meta">Something here</p>
</li>

我看到了这段代码，经过验证，它在w3c HTML5验证中返回了“有效”。

我以前认为我们不能在anchor标签内部放置h3标签。

看起来如果我们将anchor标签的属性设为display:block;，那么这种情况也是允许的？

- MEM

---

不，它在HTML 4.01上无效，但在HTML5中始终正确，无论显示如何。CSS在HTML验证中独立于HTML。 - Kedume

Answer 1

如果您查看HTML5规范，您会看到有一个关于“<a>”标签的章节：

可以将元素囊括整个段落、列表、表格等甚至整个区域，只要其内部没有交互式内容（例如按钮或其他链接）。

我在HTML4规范中未能找到任何关于在内联层级标签中放置块级标签无效的规定，但我记得在某处读到过这个限制。

- Blender

---

这段话的意思是，HTML4 DTD（文档类型定义）中包含了HTML的两种基本内容模型：字符级元素和文本字符串（%inline;），以及块级元素，如段落和列表（%block;）。a元素的DTD部分表示为<!ELEMENT A - - (%inline;)* -(A)>，这意味着a元素只能包含内联元素，而不能包含另一个a元素。 - Alohci

据我所知，HTML4规范并没有明确说明内联级元素内部的块级元素是无效的。这更多地是由个别DTD规则的累积产生的一种新兴属性。 - Alohci

Answer 2

由于其a元素的定义具有“透明”的内容模型，因此在允许出现

的上下文中出现a元素时，可以在a元素中包含h3元素，这在HTML5中被声明为有效。

这与HTML 4.01规范不同，其中a元素仅允许具有“行内”内容（例如没有标题）。所有先前的HTML规范都持相同态度。

然而，浏览器实际上也允许您将

嵌套在标签内，因此HTML5实际上只是回应了浏览器的做法。但请注意，这里存在功能上的差异：您可以通过单击标题文本右侧的某个位置来查看此差异。（原因在于如果您将

嵌套在标签内，链接将占用整个可用宽度，超过文本。）

任何CSS设置在这里都是无关紧要的。 HTML的有效性不取决于它们，甚至不取决于CSS的存在。

- Jukka K. Korpela

Answer 3

你需要在vcard类中添加display:block。

之后，你将拥有一个有效的w3文档，因为在W3标准中，你不能在行内元素(a)中使用块元素(h3)。所以你必须将包含块元素的标记转换为块元素，而不是行内元素。

- wael jawadi

---

那不正确。你不能通过HTML将元素从内联更改为块级。只有元素规范决定它是内联还是块级（以及在什么上下文中）。但是，您可以使用CSS将display从内联更改为块级，但这与有效性无关。 - unor