HTML section 标签

HTML section 语法

在 HTML 中，section 标签用于定义网页中的内容区块，通常用来对内容进行语义化分组，使其更易于理解和组织。

在 HTML5 中，section 标签一般用于某一个需要标题内容的区块。如果页面某个区块不需要标题，直接使用 div 标签就可以了。如果需要标题，则建议使用 section 标签。

注意: HTML5 标准建议，每个 section 标签内部都应该有一个标题（h1~h6），以明确其内容的主题。

article、aside 这两个标签可以看成是 “特殊” 的 section 标签，因为它们比 section 标签更具有语义化。在实际开发中，对于页面某一个区块，优先考虑语义化更好的 article 标签和 aside 标签，如果这两个都不符合，再去考虑使用 section 标签。

语法：

<section>
    ……
</section>

说明：

section 标签内部可以包含任何 HTML 合法的标签，比如 div、ul、a、img 等。

HTML section 摘要

属于	HTML 语义化
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML section 示例

接下来，我们通过一个简单的例子来讲解一下 HTML section 标签是如何使用的。

示例：section 标签的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <section>
        <h3>绿叶手册</h3>
        <ul>
            <li>HTML手册</li>
            <li>CSS手册</li>
            <li>JavaScript手册</li>
            <li>Vue手册</li>
            <li>React手册</li>
        </ul>
    </section>
</body>
</html>

页面效果如下图所示。

HTML section标签示例

HTML5 语义化标签

HTML5 新增了非常多结构性的语义化标签，以提高代码的可读性和利于 SEO，主要包括：