仅适用于有标题的独立内容块，需搭配–使用；无标题或不可独立分发的内容应避免使用，否则损害可访问性。
用
<section></strong> 不等于语义化，它只在有明确主题边界时才真正提升可读性；滥用反而让屏幕阅读器更困惑。</p> <H3> 什么时候该用 <code><section></H3> <p> 它不是 <code><div>的高级替代品，而是为“有标题的独立内容块”准备的。比如文章里的小节、仪表盘里的统计卡片组、产品页里的功能列表模块。
- 必须搭配
<h1></h1>–<h6></h6>使用，否则对辅助技术几乎无意义 - 如果一块内容没有自己的标题（哪怕只是
<h3> 功能亮点 </h3>），别硬套<section></section> - 侧边栏、页脚、导航栏这些已有专用语义标签（
<aside></aside>、<footer></footer>、<nav></nav>）的，不用<section></section>
<section></section> 和 <article></article> 到底怎么分
关键看内容是否「可独立分发或复用」。<article></article> 是能单独出现在 RSS、邮件推送、聚合页里的单元（比如一篇博客、一条新闻、一个用户评论）；<section></section> 是文档内部的逻辑分段，脱离上下文就失去意义。
- 博客正文里每个小节用
<section></section>，整篇博客用<article></article> - 首页上并列展示的三篇最新文章，每篇都该是
<article></article>，不是<section></section> - 错误写法：
<section><p> 欢迎关注我们 </p></section>—— 没标题、不可独立，纯属画蛇添足
屏幕阅读器实际怎么读 <section></section>
主流读屏软件（NVDA、VoiceOver）默认不会播报“section”这个词，但会把它的标题作为导航节点暴露给用户。也就是说：没标题的 <section></section> 在键盘导航时直接被跳过。
立即学习 “ 前端免费学习笔记（深入）”；
- Chrome + NVDA 下按
D键（跳转到下一个<section></section>）时，只会停在带<h2> 性能优化 </h2>这类标题的<section></section> - 如果多个
<section></section>共享同一级标题（比如都是<h3></h3>），读屏会把它们当作同一层级的兄弟节点，顺序很重要 - 嵌套太深（
<section><section><section></section></section></section>）会让导航路径变长，用户容易迷失
CSS 重置和默认样式要注意什么
浏览器对 <section></section> 几乎不设默认样式，但它继承了块级元素行为。真正要小心的是你写的 CSS 是否意外覆盖了语义意图。
- 别给
<section></section>加display: inline—— 它本该是流式布局的结构单元 - 避免用
section {margin: 0}全局清空，可能破坏靠外边距建立的视觉层次 - 如果用 CSS Grid 布局主内容区，
<section></section>通常该是grid-item，而不是强行设成grid-container
最常被忽略的一点：语义标签的价值不在 HTML 源码里多写了几个单词，而在于它让标题结构、焦点顺序、样式作用域三者保持一致。删掉一个没标题的 <section></section>，往往比加十个更提升可读性。
