HTML5 – <section>
标签示例
HTML5 <section>
标签定义了文档中的各个部分,例如章节,页眉,页脚或文档的任何其他部分。 以前(在 HTML5 之前),只能通过<div>
标签提供这种分离的唯一方法。
section
元素是语义元素。 这意味着它为用户代理和人员提供了有关所含内容(具体是文档的一部分)的含义。 它是一个通用语义元素,因此当其他语义容器元素(article
,aside
和nav
)都不适合时,应使用它。
<section>
标签语法
在 HTML5 中创建<section>
时,就像在 HTML 中使用<div>
标签时一样,可以使用 ID 或类属性。 每个 ID 必须是唯一的,如 HTML 中一样,并且类可以在必要时多次使用。
您应该始终将标头元素(H1
至H6
)作为section
的一部分。 如果您无法提供该部分的标题,那么<div>
元素可能更合适。 而且永远不要使用section
标签仅用于放置样式。
假设您正在创建有关数据处理的文档。 以下是<section>
元素的典型用法。
<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
元素。
学习愉快!