HTML Dog
跳至导航

分区

虽然标题可以很好地、完全有效地用于定义文档中新章节或子章节的开始，但仍有许多元素可供利用，以建立更干净、更清晰的语义结构。

虽然 div 元素可以用于包含章节，但它们主要用作 CSS 的脚手架，并不包含太多含义。结构化涉及少数几个标签，可以用于定义页面的特定部分，例如文章、页眉、页脚和导航。

文章和章节

article 元素可用于标记独立的章节内容。例如，如果将一篇博客文章视为一篇文章，则该元素可能只使用一次；如果想象复制一张包含多篇文章的传统报纸页面，则可能使用多次。

section 元素代表一个更通用的章节，可用于分割文章，或表示章节等。


<article>
    <section id="intro">
        <p>[An introduction]</p>
    </section>
    <section id="main_content">
        <p>[Content]</p>
    </section>
    <section id="related">
        <ul>
            <li><a href="that.html">That related article</a></li>
            <li><a href="this.html">This related article</a></li>
        </ul>
    </section>
</article>

虽然可以使用 div 来进行这些分隔（即使您不需要这些分隔来进行样式设置），但这提供了更丰富、更有意义的文档。

页眉和页脚

header 和 footer 提供了更专业、更具描述性的章节。


<body>
<article>
    <header>
        <h1>Alternatively&hellip;</h1>
        <p>[An introduction]</p>
    </header>
    <section id="main_content">
        <p>[Content]</p>
    </section>
    <footer>
        <p>[End notes]</p>
    </footer>
</article>
<footer>
    <p>[Copyright bumf]</p>
</footer>
</body>

footer 是其所在章节的页脚。因此，在上面的示例中，第一个 footer 是文章的页脚，第二个 footer 是页面的页脚。

侧边栏

aside 可用于表示与其周围内容相关的内容。可以将其视为文章中的引言或相关信息摘要。


<section id="main_content">
    <h1>Tixall</h1>
    <p>[All about Tixall]</p>
    <aside>
        <h2>Tixall Obelisk</h2>
        <p>[A short note about Tixall Obelisk]</p>
    </aside>
    <p>[Maybe a bit more about Tixall]</p>
</section>

导航

最后，还有 nav，用于标记一组导航链接。


<nav id="main_nav">
    <ul>
        <li><a href="/tutorials/">Tutorials</a></li>
        <li><a href="/techniques/">Techniques</a></li>
        <li><a href="/examples/">Examples</a></li>
        <li><a href="/references/">References</a></li>
    </ul>
</nav>