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

一个部分可以包含一个部分，但更好的通用容器是实际文章。而不是这个：

<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>

像这样在一篇文章中包含不同的部分感觉很自然。

Answer 3

标签本身现在非常抽象。您可以通过上述任何方式使用它们，但您的第三个选项是最正确的。

Answer 4

它们都有道理，但总的来说，第一个是最正确的。

假设整个 sn-p 代表一个真实的部分（关于同一主题的内容），那么在部分本身内部有一个页眉和一个页脚是有意义的。此外，一个部分需要一个标题（h1-6，至少一个。如果超过一个，则可能带有一个 hgroup），并且您的第二个和第三个示例中缺少它。