將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驗證中返回VALID。

我很堅強，我們不能把h3放在anchor 。

如果我們display:block;這似乎變得有效display:block; 錨？

Answer 1

如果您查看HTML5規范 ， <a>標記上有一節：

只要在其中沒有交互式內容（例如按鈕或其他鏈接）， a元素可以圍繞整個段落，列表，表格等，甚至整個部分。

我在HTML4規范中找不到任何說明將塊級標簽放在內聯級標簽內的內容無效，但我確實記得在某處讀它。

Answer 2

它在HTML5中聲明有效，因為它對a元素的定義具有“透明”內容模型。 因此，當a元素出現在允許h3的上下文中時，則允許a元素包含h3元素。

這與HTML 4.01規范不同，其中允許a元素僅具有“內聯”內容（例如，沒有標題）。 以前的所有HTML規范都采用相同的立場。

但是，瀏覽器實際上也允許你將h3嵌入到a ，因此HTML5實際上只是回應瀏覽器實踐。 但請注意，存在功能差異：您可以通過單擊標題文本右側的某個點來查看此信息。 （原因是如果你將h3嵌入a ，鏈接將獲取完整的可用寬度，延伸到文本之外。）

任何CSS設置都無關緊要。 HTML有效性不依賴於它們，甚至不依賴於CSS的存在。

Answer 3

你好

這里有些東西

你必須添加display：bloock到vcard類

之后您將擁有一個有效的w3文檔，因為在W3標准中，您不能在內聯元素（a）中包含塊元素（h3），因此您必須將作為塊元素容器的標記轉換為塊元素內聯元素