标签用于有明确主题、可独立成文且需被导航或引用的内容区块，必须配～标题，不可滥用为样式容器；其语义价值取决于页面整体结构与相邻元素关系。
section 标签不是语义万能胶，别啥都套
用 <section></section> 前先问一句：这块内容能不能独立成文、有明确主题、能被单独引用或导航？不能，就别硬上。它不是 <div> 的语义升级版，也不是为了“看起来更规范”而加的装饰标签。
<p>常见错误现象：<code><section></section> 套着一个按钮+一行文字；整个侧边栏包一层 <section></section>；轮播图容器标成 <section></section> —— 这些都没语义必要，反而干扰屏幕阅读器和 SEO。
- 真正适合的场景：文章里的「背景介绍」「方法论」「实验结果」等逻辑章节；仪表盘中「用户活跃趋势」「最近订单列表」这类可命名、可跳转的独立数据模块
- 必须配
<h2></h2>～<h6></h6>标题（哪怕视觉上隐藏），否则辅助技术无法识别其主题 - 嵌套层级不宜过深——两个
<section></section>套着另一个<section></section>很容易让结构失焦
section 和 article、div 的边界在哪
<section></section> 描述“主题区块”，<article></article> 描述“可独立分发的内容单元”（比如一篇博客、一条新闻、一个评论），<div> 是纯样式/脚本容器，三者不互换。
<p>使用场景差异明显：一个博客页面里，整篇博文用 <code><article></article>；它里面的「作者说明」「参考资料」可用 <section></section>；而页脚的版权信息、JS 控制的弹窗遮罩层，就该用 <div>。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>
<code><article></article> 内部可以有多个 <section></section>，但 <section></section> 里一般不该再套 <article></article>（除非是“相关文章推荐”这种明确的独立内容集合）
<article></article>
<div> 更诚实
<h3>section 不影响布局，但会影响无障碍和 SEO</h3>
<p><code><section></section> 本身没有默认样式，也不会改变盒模型或流式行为，CSS 怎么写还是怎么渲染。但它会向浏览器暴露文档大纲（outline），进而影响屏幕阅读器朗读顺序、搜索引擎对内容权重的判断。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
性能影响几乎为零，但滥用会稀释语义信号——就像满屏都是加粗，最后等于没加粗。
- 检查大纲是否合理：用浏览器开发者工具的「Accessibility」面板或插件（如 HeadingsMap）查看结构层级
- 避免用
aria-label强行覆盖<section></section>的语义，它本应靠标题自然表达 - 服务端渲染时若动态插入
<section></section>但漏掉标题，会导致无障碍树断裂，比不用还糟
section 标签在旧浏览器里完全安全，但别指望它“修复”语义混乱
IE9+ 都支持 <section></section>，且无兼容性问题。但注意：仅添加标签不会自动提升可访问性，必须配合正确的标题层级和 DOM 顺序。
容易踩的坑是——以为用了 <section></section> 就算完成语义化，结果标题乱跳（比如 <h3></h3> 后面跟 <h1></h1>）、section 之间逻辑断裂、或者把表单字段组也塞进去。
- 不要用 CSS 的
display: contents把<section></section>的语义“藏起来”——它还在大纲里，只是视觉消失，会造成严重误导 - SSR 或静态生成时，确保每个
<section></section>在 HTML 输出阶段就带有效标题，而不是靠 JS 后续注入 - 最常被忽略的一点：section 的语义价值，取决于它在整个页面结构中的位置和相邻元素的关系，而不是单个标签本身
