标签应仅用于有独立主题、可命名和出现在文档大纲中的语义区块，必须配合–标题使用，否则语义失效；它不同于（仅布局）和（可独立分发的内容单元）。
HTML 中的 <section></section> 标签不是“随便包一块内容”的容器，它代表一个有独立主题、可被单独引用或导航的语义区块。
什么时候该用 <section></section> 而不是 <div>
<p>核心判断标准：这块内容能否被单独命名、摘要、跳转或出现在文档大纲中。比如一篇博客里「引言」「技术原理」「代码示例」「性能对比」各自是一个 <code><section></section>；但页脚里的社交媒体图标列表、导航栏里的下拉菜单，通常只是布局或交互单元，用 <div> 更合适。
<p>常见错误现象：<code><section></section> 套 <section></section> 却没有嵌套的标题（<h2></h2>–<h6></h6>），导致屏幕阅读器无法建立层级关系；或者把整个页面主体全塞进一个 <section></section>，反而削弱了语义。
- 必须配合标题元素（
<h2></h2>–<h6></h6>）使用，否则语义断裂
- 同一级
<section></section> 应有逻辑并列关系，不是父子控制关系
- 如果只是为了样式或 JS 选中，优先用
<div> + <code>class，别滥用 <section></section>
<section></section> 和 <article></article> 的边界在哪
<article></article> 是可独立分发、重用的内容单元（比如一篇博文、一条新闻、一个用户评论）；<section></section> 是为组织内容服务的语义分组，依赖上下文存在。一个 <article></article> 内部可以有多个 <section></section>，但反过来不成立。
立即学习“前端免费学习笔记（深入）”；
使用场景举例：产品介绍页里，“核心功能”“客户案例”“技术参数”是三个并列 <section></section>；而其中“客户案例”区块里每条客户反馈，才各自是 <article></article>。
-
<section></section> 不要求能脱离当前页面被 RSS 抓取或单独链接
-
<article></article> 必须自带完整上下文（如作者、发布时间），<section></section> 不需要
- 浏览器自动生成的文档大纲（如通过开发者工具查看）会把
<section></section> 当作一个可折叠节点，前提是它有标题
不加标题的 <section></section> 会怎样
它在语义上失效——HTML5 规范明确指出：<section></section> 应“通常”有标题，没有标题时，需确认它是否真的不可命名。实际影响包括：
- 辅助技术（如读屏软件）可能忽略该区块，或将其降级为普通
<div>
<li>搜索引擎可能弱化其内容权重，尤其当页面缺乏清晰结构时</li>
<li>自动提取大纲工具（如某些 CMS 或 SEO 插件）无法识别该区块意图</li>
<li>开发者协作时，别人很难快速理解这个 <code><section></section> 承载什么职责
如果你真找不到合适标题，大概率说明它不该是 <section></section> ——考虑用 <div>、<code><aside></aside> 或直接移除标签。
兼容性和渲染风险提醒
<section></section> 是 HTML5 标签，IE8 及更早版本不识别，但可通过 document.createElement('section') 或引入 html5shiv 补丁解决。不过真正容易被忽略的是 CSS 重置问题：
- 部分旧版 CSS 重置库（如早期 Normalize.css）未给
<section></section> 设默认 margin，导致相邻区块贴得太近
- 若全局用
section { display: block; }，在极少数定制内核浏览器中可能触发未知渲染 bug（虽罕见，但企业级项目需留意）
- 服务端渲染（SSR）框架若未正确声明 DOCTYPE，可能退化为 quirks mode，使
<section></section> 行为异常
最稳妥的做法：始终声明 ，用现代 CSS 重置（如 modern-normalize），并避免对 <code><section></section> 做全局 display 覆盖。
<h2></h2>–<h6></h6>）使用，否则语义断裂<section></section> 应有逻辑并列关系，不是父子控制关系<div> + <code>class，别滥用 <section></section>
<section></section> 和 <article></article> 的边界在哪
<article></article> 是可独立分发、重用的内容单元（比如一篇博文、一条新闻、一个用户评论）；<section></section> 是为组织内容服务的语义分组，依赖上下文存在。一个 <article></article> 内部可以有多个 <section></section>，但反过来不成立。
立即学习“前端免费学习笔记（深入）”；
使用场景举例：产品介绍页里，“核心功能”“客户案例”“技术参数”是三个并列 <section></section>；而其中“客户案例”区块里每条客户反馈，才各自是 <article></article>。
-
<section></section>不要求能脱离当前页面被 RSS 抓取或单独链接 -
<article></article>必须自带完整上下文（如作者、发布时间），<section></section>不需要 - 浏览器自动生成的文档大纲（如通过开发者工具查看）会把
<section></section>当作一个可折叠节点，前提是它有标题
不加标题的 <section></section> 会怎样
它在语义上失效——HTML5 规范明确指出：<section></section> 应“通常”有标题，没有标题时，需确认它是否真的不可命名。实际影响包括：
- 辅助技术（如读屏软件）可能忽略该区块，或将其降级为普通
<div> <li>搜索引擎可能弱化其内容权重，尤其当页面缺乏清晰结构时</li> <li>自动提取大纲工具（如某些 CMS 或 SEO 插件）无法识别该区块意图</li> <li>开发者协作时，别人很难快速理解这个 <code><section></section>承载什么职责 - 部分旧版 CSS 重置库（如早期 Normalize.css）未给
<section></section>设默认 margin，导致相邻区块贴得太近 - 若全局用
section { display: block; }，在极少数定制内核浏览器中可能触发未知渲染 bug（虽罕见，但企业级项目需留意） - 服务端渲染（SSR）框架若未正确声明 DOCTYPE，可能退化为 quirks mode，使
<section></section>行为异常
如果你真找不到合适标题，大概率说明它不该是 <section></section> ——考虑用 <div>、<code><aside></aside> 或直接移除标签。
兼容性和渲染风险提醒
<section></section> 是 HTML5 标签，IE8 及更早版本不识别，但可通过 document.createElement('section') 或引入 html5shiv 补丁解决。不过真正容易被忽略的是 CSS 重置问题：
最稳妥的做法：始终声明 ，用现代 CSS 重置（如 modern-normalize），并避免对 <code><section></section> 做全局 display 覆盖。
