恩施土家族苗族自治州网站建设_网站建设公司_SQL Server_seo优化
2026/1/16 6:17:34 网站建设 项目流程

<section>是 HTML5 引入的语义化区块标签,用来标记文档中逻辑上独立、主题相关的内容块。简单说:看到<section>就知道“这里面是一小块完整的内容”。


核心特征(一句话版本)

  • 必须有标题:每个<section>内通常要包含至少一个<h1><h6>标题,否则应该用<div>
  • 可嵌套:Section 里可以再套 Section,表示子章节。
  • 不是<div><div>是通用容器,无意义;<section>有明确语义,表示“独立内容区”。

典型使用场景

<!-- ✅ 正确用法:文章章节 --><article><h1>JavaScript 入门</h1><section><h2>变量声明</h2><p>let 和 const 的区别...</p></section><section><h2>函数定义</h2><p>箭头函数与普通函数...</p></section></article><!-- ✅ 正确用法:搜索结果 --><section><h2>搜索结果</h2><ul><li>结果1</li><li>结果2</li></ul></section><!-- ❌ 错误用法:仅为样式 --><sectionclass="wrapper"><!-- 应该用 <div> --><div>内容</div></section>

<div>的快速区分法则

问题<section><div>
内容是否有独立标题?✅ 是❌ 否
是否只是为了布局和样式?❌ 否✅ 是
屏幕阅读器会把它当独立区块播报?✅ 会❌ 不会

一句话记忆
“有标题的独立内容块用 section,纯容器用 div。”

在 HTML 大纲(outline)算法里,每个<section>都会生成一个隐式区块,有助于 SEO 和无障碍访问。但别为了“语义”而过度使用——如果内容不够独立,还是用<div>更干净。

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询