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和CSS 3:您即将使用的技术
• HTML5概述(*最佳实践块)
• 使用HTML5 + CSS3设计未来:教程和最佳实践