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验证中返回VALID。

我很难说h3内没有anchor。

如果我们display:block;锚点，这似乎变得有效了吗？

Answer 1

如果您查看HTML5 spec，<a>标记上会有一个部分：

a元素可以包裹整个段落，列表，表格等，甚至整个部分，只要内部没有交互式内容（例如按钮或其他链接）。

我在HTML4 spec中找不到任何说明在内联级别标记中放置块级标记无效的内容，但我确实记得在某处读过它。

Answer 2

它在HTML5中声明有效，因为它的definition of the a element具有“透明”内容模型。因此，当a元素出现在允许h3的上下文中时，a元素可以包含h3元素。

这与HTML 4.01规范不同，其中a element仅允许“内联”内容（例如，没有标题）。以前的所有HTML规范都采取相同的立场。

但是，浏览器实际上允许您在h3内嵌套a，因此HTML5实际上只是回应浏览器实践。但请注意，存在功能差异：您可以通过单击标题文本右侧的某个点来查看此信息。（原因是如果您将h3嵌套在a内，则链接将获取完整的可用宽度，并延伸到文本之外。）

任何CSS设置都无关紧要。 HTML有效性不依赖于它们，甚至不依赖于CSS。

Answer 3

你好
这里的东西

你必须将display：bloock添加到vcard类

之后你将拥有一个有效的w3文档，因为在W3标准中你不能在内联元素（a）中有一个块元素（h3）因此，您必须将作为块元素容器的标记转换为内嵌元素的块元素

将h3嵌入锚点 - 这是如何有效的？

3 个答案:

你好