HTML5中的主要內容

比方說，我總是想要在一個項目中使用main元素爲不同的頁面類型。其中一種頁面類型只是一個產品頁面，帶有標題和一些部分。其變種是語義正確：HTML5中的主要內容

一個

<body> 
    <header> 
     ... 
    </header> 
    <main> 
     <header> 
      <h1>...</h1> 
      <img /> 
     </header> 
     <section> 
      <h1>...</h1> 
      <p>...</p> 
     </section> 
     <section> 
      <h1>...</h1> 
      <p>...</p> 
     </section> 
    </main> 
    <footer> 
     ... 
    </footer> 
</body>

乙

<body> 
    <header> 
     ... 
    </header> 
    <main> 
     <article> 
      <header> 
       <h1>...</h1> 
       <img /> 
      </header> 
      <section> 
       <h1>...</h1> 
       <p>...</p> 
      </section> 
      <section> 
       <h1>...</h1> 
       <p>...</p> 
      </section> 
     </article> 
    </main> 
    <footer> 
     ... 
    </footer> 
</body>

我想說A不能是正確的。根據工作草案：

header元素表示其最近的祖先分段內容或分段根元素的介紹性內容。

main元素不是分段內容，對文檔大綱沒有影響。

因此，在A的body > main > header將表示用於body的介紹內容這是切片根元素。

對於那些可能會問，爲什麼你不使用B沒有main。這有技術上的原因，我總是使用main或不。在主要內容中還有其他多種文章的頁面類型。

來源

2013-08-25 witrin

你的問題是什麼？ –

哪個變體在語義上是正確的？並且可以變體'A'語義正確？ – witrin

示例A不正確。我可以想到沒有內容，例如A會有意義。

你給出了正確的解釋，爲什麼是這樣的話：

的header屬於它的「最近的祖先切片的內容或切片根元素」。

在示例甲，二者header元件將屬於body（=最接近切片根元素），但只有第一header應該屬於它，而第二個header應該屬於產品。

由於main不是一個切片內容元素，你需要在這裏使用一個。 article似乎是正確的選擇（因爲它的所有內容都是關於產品的），所以示例B看起來不錯。

來源

2013-12-31 00:06:52 unor

HTML5中的主要內容

回答

相關問題