HTML5 <header>，<section>和<footer>標記的語義究竟如何工作？

Question

我有點困惑，我該如何使用HTML5 <header>，<section>和<footer>標籤。目前，我不能工作了是否使用它們像這樣：

<section id="example_section"> 
    <header> 
     <h1>Example Section</h1> 
     <p>etc</p> 
    </header> 

    <p>Content para 1</p> 
    <p>Content para 2</p> 
    <p>Content para 3</p> 

    <footer> 
     Wasn't that swell? 
    </footer> 
</section> 

或者這樣：

<header> 
    <h1>Example Section</h1> 
    <p>etc</p> 
</header> 

<section id="example_section"> 
    <p>Content para 1</p> 
    <p>Content para 2</p> 
    <p>Content para 3</p> 
</section> 

<footer> 
    Wasn't that swell? 
</footer> 

或者損害，這樣的：

<section id="example_section_wrapper"> 
    <header> 
     <h1>Example Section</h1> 
     <p>etc</p> 
    </header> 
    <section id="example_section"> 
     <p>Content para 1</p> 
     <p>Content para 2</p> 
     <p>Content para 3</p> 
    </section> 
    <footer> 
     Wasn't that swell? 
    </footer> 
</section> 

我已經包括該ID用於顯示各部分的預期含義。我意識到他們是不必要的。哪種方法是正確的？

Answer 1

所有是正確的在彼此的方式，但這是更優於其他任何

<section id="example_section_wrapper"> 
    <header> 
     <h1>Example Section</h1> 
     <p>etc</p> 
    </header> 
    <section id="example_section"> 
     <p>Content para 1</p> 
     <p>Content para 2</p> 
     <p>Content para 3</p> 
    </section> 
    <footer> 
     Wasn't that swell? 
    </footer> 
</section> 

情侶的最佳實踐和TUTS的鏈接

• HTML 5 and CSS 3: The Techniques You’ll Soon Be Using
• HTML5 Overview（*最佳實踐塊）
• Designing for the Future with HTML5+CSS3 : Tutorials and Best Practices

Answer 2

標籤本身非常抽象，現在。你可以用上述任何一種方式使用它們，但你的第三個選項是最正確的。

Answer 3

他們都可以說得通，但第一個是最正確的，一般來說。

假設整個片段代表一個真正的片段（關於同一主題的內容），它在片段本身內部具有頁眉和頁腳是有意義的。還有一個部分需要一個標題（h1-6，至少一個，如果不止一個，可能帶有一個hgroup），並且它在第二個和第三個示例中缺失。

Answer 4

部分可以包含一個部分，但更好的一般容器是實體物品。取而代之的是：

<section id="example_section_wrapper"> 
    <header> 
     <h1>Example Section</h1> 
     <p>etc</p> 
    </header> 
    <section id="example_section"> 
     <p>Content para 1</p> 
     <p>Content para 2</p> 
     <p>Content para 3</p> 
    </section> 
    <footer> 
     Wasn't that swell? 
    </footer> 
</section> 

你可能想用這個：

<article> 
    <header> 
     <h1>Example Section</h1> 
     <p>etc</p> 
    </header> 
    <section id="example_section"> 
     <p>Content para 1</p> 
     <p>Content para 2</p> 
     <p>Content para 3</p> 
    </section> 
    <footer> 
     Wasn't that swell? 
    </footer> 
</article> 

喜歡這個感覺自然有各個部分在一篇文章。