正確的HTML語法爲這個'圖標'塊

好吧，所以即時嘗試重拍我的網站，我想問一下，如果這種HTML語法即時使用是正確的。正確的HTML語法爲這個'圖標'塊

的HTML代碼是這樣的：

<a href="http://the_url.com" target="_blank"> 
    <img src="../img/id.png" width="32" height="32" alt="id" /> 
    <h4>Title</h4> 
    <p class="des">Description</p> 
</a>

併爲CSS我主要做顯示爲塊標記。

這是正確的編碼還是我應該重拍一個不同的方式？你可以看到一個例子：http://varemenos.com

來源

2011-09-20 Adonis K. Kakoulidis

根據<a>標籤的HTML5 specification，該語法是有效的。它不在以前的HTML版本中。

如果構造符合其語義含義仍然取決於您和實際內容。如果您將其用於文本的短片段（特別是在說明中），我認爲它很好。如果內容變得更長，您可能需要考慮將其拆分並將錨點向下移動一層，以使用戶更清楚地瞭解頁面的哪些部分實際上是鏈接目標。

來源

2011-09-20 20:14:28

這個網站可能感興趣：W3 validator。

根據驗證器，您的網站是HTML5有效。

來源

2011-09-20 19:31:14

哪個downvote機器走過了這個頁面？（我不介意，我已經達到了今天的每日代表限額）。 –

使用驗證程序的+1 =） –

-1

您正在內聯元素（a）中使用塊元素（h4和p）。這不是「正確的」。

這可以通過添加CSS規則來解決，以便a具有display:block或display: inline-block。

來源

2011-09-20 19:31:50

添加CSS規則不會使無效標記有效。不管其他任何東西，塊元素都不允許在內聯元素中使用。 –

'display：block'或'display：inline-block'使它成爲一個塊元素，所以它不再是內聯元素，所以沒有問題。 –

它使其表現得像一個塊元素，但根據DTD（對於使用DTD或XML模式定義的HTML版本）並沒有真正實現它。 HTML5實際上改變了這個定義，所以''標籤是[透明]（http://dev.w3.org/html5/markup/terminology.html#transparent），這意味着如果它包含在允許流動的元素中又名塊）元素，它可以包含流本身。因此，如果OP的「」標籤包含在例如一個div，它在HTML5中是正確的語法（但不是以前的版本）。 –

正確的HTML語法爲這個'圖標'塊

回答

相關問題