应优先用当内容有独立标题且主题明确可单独引用；否则用作无语义容器。错误套用会干扰无障碍访问与SEO，其必须含~标题才符合语义规范。
什么时候该用 <section></section> 而不是 <div>
<p><code><section></section> 不是「高级版 <div>」，它只在内容本身构成一个逻辑独立的章节时才适用。比如一篇博客里的「背景」「方法」「结果」「讨论」——每个都自带标题（<code><h2></h2> 或更高），且语义上可被单独引用或导航。而 <div> 是纯容器，不传递任何结构含义，适合布局分块、样式隔离或 JS 操作钩子。
<p>常见错误现象：<code><section></section> 套着没标题的内容，或者只为加个边框/内边距就硬套——这会让屏幕阅读器误判结构，SEO 也可能降权。
- 有
<h2></h2>～<h6></h6> 且内容主题明确 → 优先 <section></section>
- 纯样式分组、JS 动态插入区域、无语义的网格项 → 用
<div>
<li>不确定要不要用？删掉标签看内容是否仍能自然分段——不能，就别用 <code><section></section>
<section></section> 和 <article></article> 容易混用，怎么分清
<section></section> 描述「某一部分」，<article></article> 描述「可独立存在、可被重用的内容单元」。一篇新闻页里，整篇报道是 <article></article>；它的「作者介绍」「相关链接」区块才是 <section></section>；但如果「相关链接」里嵌了一个完整转载的短评，那个短评本身又该是 <article></article>。
性能/兼容性影响几乎为零，但语义错用会影响辅助技术解析和内容聚合（比如 RSS 抓取器可能只认 <article></article>）。
立即学习“前端免费学习笔记（深入）”；
-
<article></article> 应能脱离上下文被单独发布（如分享到社交媒体）
-
<section></section> 通常依赖父级上下文才有完整意义
- 嵌套合法：
<article></article> 里可以有多个 <section></section>，反之不行
用了 <section></section> 却被 Chrome DevTools 标黄警告
DevTools 在 Elements 面板里标黄 <section></section>，大概率是因为它缺少标题——HTML5 规范虽未强制要求，但 W3C 明确建议每个 <section></section> 应有 <h2></h2>～<h6></h6> 级标题。没有标题的 <section></section> 会被视为「语义不完整」。
错误示例：<section><p>这里是联系方式</p></section> → 应改为 <section><h2>联系方式</h2>
<p>...</p></section>
- 标题不必视觉可见，可用
aria-label 或 sr-only 类隐藏，但 DOM 中必须存在
- 用
<h1></h1> 不推荐：会破坏文档大纲层级，尤其在 CMS 多模板场景下难维护
- 标题层级要连贯：避免从
<h2></h2> 跳到 <h4></h4>
<div> 真的完全没语义吗？什么情况下它比 <code><section></section> 更合适
不是「没语义」，而是「无预设语义」——<div> 的语义由开发者自己通过 class、role 或 ARIA 注入。当你要做的是 CSS Grid 布局容器、Canvas 渲染画布挂载点、或者 React/Vue 组件根节点（需透传 props 到原生元素），<code><div> 反而是更干净、更可控的选择。
<p>强行用 <code><section></section> 替代会导致：无障碍树多出无意义的「section」节点；自动化测试脚本误判结构；未来改版时语义包袱变重。
- 需要
display: grid 或 position: relative 等纯样式控制 → <div>
<li>作为第三方组件（如地图 SDK）的挂载容器 → <code><div>
<li>JS 动态生成内容，且结构随状态频繁变化 → <code><div> 更轻量
<p>语义标签的价值不在「用了多少」，而在「是否准确反映内容本质」。用错 <code><section></section> 比不用更难收场。
<h2></h2>～<h6></h6> 且内容主题明确 → 优先 <section></section>
<div>
<li>不确定要不要用？删掉标签看内容是否仍能自然分段——不能，就别用 <code><section></section>
<section></section> 和 <article></article> 容易混用，怎么分清
<section></section> 描述「某一部分」，<article></article> 描述「可独立存在、可被重用的内容单元」。一篇新闻页里，整篇报道是 <article></article>；它的「作者介绍」「相关链接」区块才是 <section></section>；但如果「相关链接」里嵌了一个完整转载的短评，那个短评本身又该是 <article></article>。
性能/兼容性影响几乎为零，但语义错用会影响辅助技术解析和内容聚合（比如 RSS 抓取器可能只认 <article></article>）。
立即学习“前端免费学习笔记（深入）”；
-
<article></article>应能脱离上下文被单独发布（如分享到社交媒体） -
<section></section>通常依赖父级上下文才有完整意义 - 嵌套合法：
<article></article>里可以有多个<section></section>，反之不行
用了 <section></section> 却被 Chrome DevTools 标黄警告
DevTools 在 Elements 面板里标黄 <section></section>，大概率是因为它缺少标题——HTML5 规范虽未强制要求，但 W3C 明确建议每个 <section></section> 应有 <h2></h2>～<h6></h6> 级标题。没有标题的 <section></section> 会被视为「语义不完整」。
错误示例：<section><p>这里是联系方式</p></section> → 应改为 <section><h2>联系方式</h2>
<p>...</p></section>
- 标题不必视觉可见，可用
aria-label或sr-only类隐藏，但 DOM 中必须存在 - 用
<h1></h1>不推荐：会破坏文档大纲层级，尤其在 CMS 多模板场景下难维护 - 标题层级要连贯：避免从
<h2></h2>跳到<h4></h4>
<div> 真的完全没语义吗？什么情况下它比 <code><section></section> 更合适
不是「没语义」，而是「无预设语义」——<div> 的语义由开发者自己通过 class、role 或 ARIA 注入。当你要做的是 CSS Grid 布局容器、Canvas 渲染画布挂载点、或者 React/Vue 组件根节点（需透传 props 到原生元素），<code><div> 反而是更干净、更可控的选择。
<p>强行用 <code><section></section> 替代会导致：无障碍树多出无意义的「section」节点；自动化测试脚本误判结构；未来改版时语义包袱变重。
- 需要
display: grid或position: relative等纯样式控制 →<div> <li>作为第三方组件（如地图 SDK）的挂载容器 → <code><div> <li>JS 动态生成内容，且结构随状态频繁变化 → <code><div> 更轻量 <p>语义标签的价值不在「用了多少」，而在「是否准确反映内容本质」。用错 <code><section></section>比不用更难收场。
