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来展示各个部分的预期意义，我意识到它们是不必要的。哪种方法是正确的？

- Eric

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>

以下是一些最佳实践和教程链接

• HTML 5和CSS 3：您即将使用的技术
• HTML5概述 (*最佳实践块)
• 使用HTML5+CSS3设计未来：教程和最佳实践

- Pramendra Gupta

---

从一个说出“more better then any other”这种用法的人那里得到语义方面的建议，是一个好主意吗？(+1) - Eric

@Eric：请查看http://html5doctor.com/avoiding-common-html5-mistakes/和http://html5doctor.com/downloads/h5d-sectioning-flowchart.png。 - Alix Axel

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>

像这样，在一篇文章中拥有多个部分会感觉很自然。

- emik

---

更好的使用方法是这样标准化“section”和“article”的含义。对此帖子点赞。 - Joem Maranan

Answer 3

标签本身现在还相当抽象。您可以按照上述任何一种方式使用它们，但第三个选项是最正确的。

- Kirk

Answer 4

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

假设整个片段代表一个真实的部分（关于同一主题的内容），在部分本身内部放置标题和页脚是有意义的。此外，一个部分需要一个标题（h1-6，至少一个。如果有多个，则可能需要使用hgroup），而您的第二个和第三个示例中缺少标题。

- Fra Sprea