HTML <section> 标签

HTML <section> 标签是一个语义化的 HTML 标签，用于定义文档中通常包含一组相关内容的区块。例如，

<section>
    <h2>Java</h2>
    <p>Java is used to develop Android applications, enterprise software, etc.</p>
</section>

<section>
    <h2>JavaScript</h2>
    <p>JavaScript is used to create dynamic single-page web applications.</p>
</section>

浏览器输出

这里，<section> 即使单独查看也有意义。很明显，第一个 <section> 是关于 Java 的，第二个是关于 Javascript 的。

注意：<section> 标签应始终包含一个标题。

嵌套的 <section> 标签

我们可以在 <section> 标签内部包含一个 <section> 标签。这被称为嵌套的 <section> 标签。例如，

<section>
    <h2>Animals</h2>
    <p>Animals can be divided into various categories: </p>
    <section>
        <h3>Aves</h3>
        <p>Aves are animals with wings and feathers. </p>
    </section>
</section>

浏览器输出

这里，我们有一个标题为 Animals 的区块和一个段落作为主要区块，并且在其中嵌套了另一个标题为 Aves 的区块。

何时使用 HTML <section> 标签？

我们使用 HTML <section> 标签来组织复杂的文档。例如，

<section>
    <h2> HTML </h2>
    <p> HTML is a standard markup language for creating using HTML elements. </p>

    <section>
        <h3>Why learn HTML?</h3>
        <p> You should learn HTML if you want to build, manage or improve websites. </p>
    </section>

</section>

<section>
    <h2> CSS </h2>
    <p> CSS is used to style HTML elements. </p>
</section>

浏览器输出

这里，你可以看到我们把 HTML 和 CSS 放在不同的区块中。有不同的区块可以更容易地组织文档的内容。