应优先用<section>而非<div>承载可命名、可独立跳转的主题单元（如“安装步骤”），无标题的<section>语义失效，须配<h2>等标题以保障可访问性与SEO。
<section></section> 不是“包一块内容就完事”的通用容器，它必须承载一个可命名、可出现在文档大纲里的独立主题；没标题的 <section></section> 在语义上等同于 <div>，只是多写了几个字符。
<h3>什么时候该用 <code><section></section> 而不是 <div>
<p>核心看这块内容是否能被单独叫出名字、摘要或跳转——比如「安装步骤」「性能对比」「用户反馈」，这些是明确的主题单元；而轮播图外层、Grid 布局容器、JS 操作用的包裹层，没有主题性，就该用 <code><div>。
<ul>
<li>你给它起个名字，别人一听就懂它干啥 → 适合 <code><section></section>
<div class="..."> 更诚实
<li>团队里有人把它当“高级 <code><div>”用，结果整页塞满无标题的 <code><section></section> → 大纲结构直接失效
<section></section> 必须配 <h2></h2>–<h6></h6> 吗？
规范上写的是“通常应有”，但实际中：没有标题的 <section></section> 会让屏幕阅读器忽略其语义层级，搜索引擎也难识别其意图；如果你真找不到合适标题，大概率说明它不该是 <section></section>。
- 标题不一定要视觉可见，可用
<h3 class="visually-hidden"></h3>隐藏但保留语义 - 嵌套的子
<section></section>标题层级要递进（父用<h2></h2>，子用<h3></h3>），不能全用<h2></h2> - 同一级多个
<section></section>应逻辑并列，比如「技术原理」「代码示例」「部署流程」，而非「导航栏」「页脚」这种非主题内容
<section></section> 和 <article></article> 套用时谁包谁？
<article></article> 可以放在 <section></section> 里，反过来不行。关键判断点是：这段内容脱离当前页面还能不能独立存在、被 RSS 抓取、或单独分享？
立即学习“前端免费学习笔记（深入）”；
- 首页的「最新博客」区块 → 外层用
<section></section>（主题是“最新内容”），每篇博文用<article></article> - 某篇博文内部的「兼容性说明」小节 → 用
<section></section>，因为它依赖原文上下文 - 把整篇博文直接塞进
<section></section>而不用<article></article>→ 错失可分发性，对 SEO 和 RSS 不友好
最容易被忽略的是标题缺失和层级错乱：一个没 <h2></h2> 的 <section></section> 不会报错，但等于主动放弃语义价值；而把 <article></article> 当成 <section></section> 的子容器来组织页面结构，反而破坏了内容的独立传播路径。
