html - HTML5 <header>、 和 <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