代码之家 › 专栏 › 技术社区 › Eric

html5<header>、<section>和<footer>标记的语义是如何工作的?

semantic-markup semantics html5

Eric · 技术社区 · 14 年前

我有点困惑我该怎么用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。我知道这是不必要的。哪种方法正确?

4 回复 | 直到 8 年前

Pramendra Gupta 14 年前

在某种程度上都是正确的,但这比其他的更好

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

emik 12 年前

一个部分可以包含一个部分,但是一个更好的通用容器是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>

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

Kirk 14 年前

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

Fra Sprea 14 年前

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

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