html5<header>、<section>和<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>

最佳实践和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

一个部分可以包含一个部分,但是一个更好的通用容器是actuall文章。而不是这个:

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

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

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

它们都有意义,但一般来说,第一个是最正确的。

假设整个代码段代表一个真实的部分(关于同一主题的内容),那么在该部分内部有一个页眉和页脚是有意义的。另外,一个部分需要一个标题(h1-6,至少一个。如果不止一个,可能是一个hgroup),第二个和第三个示例中缺少它。