🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# HTML5 – `<section>`标签示例 > 原文: [https://howtodoinjava.com/html5/html5-section-tag/](https://howtodoinjava.com/html5/html5-section-tag/) HTML5 `<section>`标签**定义了文档**中的各个部分,例如章节,页眉,页脚或文档的任何其他部分。 以前(在 HTML5 之前),只能通过`<div>`标签提供这种分离的唯一方法。 `section`元素是[语义](https://en.wikipedia.org/wiki/Semantics)元素。 这意味着它为用户代理和人员提供了有关所含内容(具体是文档的一部分)的含义。 它是一个通用语义元素,因此当其他语义容器元素(`article`,`aside`和`nav`)都不适合时,应使用它。 ## `<section>`标签语法 在 HTML5 中创建`<section>`时,就像在 HTML 中使用`<div>`标签时一样,可以使用 **ID** 或**类**属性。 每个 **ID** 必须是唯一的,如 HTML 中一样,并且**类**可以在必要时多次使用。 您应该始终将标头元素(`H1`至`H6`)作为`section`的一部分。 如果您无法提供该部分的标题,那么`<div>`元素可能更合适。 而且永远不要使用`section`标签仅用于放置样式。 假设您正在创建有关数据处理的文档。 以下是`<section>`元素的典型用法。 ```java <section id="preparation" class="imaginaryClass"> <h2>Prepare Data</h2> <p>Random text Random text Random text...</p> </section> <section id="processing"> <h2>Process Prepared Data</h2> <p>Some More Random text Some More Random text Some More Random text ...</p> </section> <section id="display"> <h2>Processed Data</h2> <p>Some More Random text Some More Random text Some More Random text ...</p> </section> ``` ## 总结 `<section></section>`元素的目的不是替换 HTML `<div>`标签。 如果要将文档划分为逻辑文档部分(以定义内容的语义上离散的**部分**),请使用`<section></section>`元素或结构元素之一。 但是,如果仅出于格式化目的分割文档,则适合使用`<div>`标签。 如果正确使用它们,则可以在有效的 HTML5 文档中同时使用`DIV`和`SECTION`元素。 学习愉快!