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

我很难说我们不能h3anchor.

display:block;如果我们是主播,这似乎变得有效?

4

3 回答 3

18

如果您查看HTML5 规范<a>,标签上有一个部分:

a元素可以围绕整个段落、列表、表格等,甚至整个部分,只要其中没有交互式内容(例如按钮或其他链接)。

我在HTML4 规范中找不到任何内容说将块级标签放在内联级标签内是无效的,但我确实记得在某处读过它。

于 2012-09-30T08:20:45.103 回答
7

它在 HTML5 中被声明为有效,因为它对元素的定义a具有“透明”内容模型。因此,当一个a元素出现在允许的上下文中时h3,则a允许该元素包含一个h3元素。

这偏离了 HTML 4.01 规范,其中允许a元素仅具有“内联”内容(例如,没有标题)。所有以前的 HTML 规范都采取相同的立场。

However, browsers actually let you nest h3 inside a, too, so HTML5 is effectively just echoing browser practice. Note, however, that there is a functional difference: you can see this by clicking on some point to the right of the heading text. (The reason is that if you nest h3 inside a, the link takes the full available width, extending past the text.)

Any CSS settings are immaterial here. HTML validity does not depend on them, or even on the existence of CSS.

于 2012-09-30T12:50:30.597 回答
0

你好

这里有东西

你必须添加 display:block 到 vcard 类

之后,您将拥有一个有效的 w3 文档,因为在 W3 标准中,您不能在内联元素(a)中包含块元素(h3),因此您必须将作为块元素容器的标签转换为块元素插入内联元素

于 2012-09-30T10:50:16.563 回答