section是专指有独立主题、可命名导航的内容区块，必须配h2–h6标题才具语义；div则明确表示无任何语义，仅作容器使用，两者功能相同但传递的结构信号截然不同。
section 不是“带语义的 div”，而是专指“有独立主题、可被命名和导航的内容区块”；div 则明确表示“此处无任何语义，仅作容器使用”。两者功能一致，但向浏览器、搜索引擎和辅助技术传递的信号完全不同。
section 必须配标题才生效
没有 <h2> 到 <h6> 的 <section> 在语义上等同于 <div>，且会被读屏器跳过、Lighthouse 标记为可访问性问题。它不是样式容器，而是文档大纲中的一个逻辑节点。
- 标题不必视觉可见，可用
class="visually-hidden"隐藏，但必须存在且语义准确 - 嵌套的
<section>应使用更低一级的标题（如父级用<h2>，子级用<h3>） - 若一时想不出合适标题，说明这段内容大概率不该用
<section>
div 是唯一声明“无语义”的标签
<div> 的官方定义就是 “no special meaning at all”。它不参与文档结构解析，对 SEO 和读屏器透明，只靠 class、id 或 ARIA 属性传递意图。
- 适合 CSS 布局容器：如
<div class="grid-container"> - 适合 JS 操作锚点：如
<div id="chart-root">、<div data-js="tab-content"> - 适合纯交互或样式分组：如下拉菜单、加载动画、模态框遮罩层
选错标签不影响渲染，但会干扰理解
两者在 DOM 查询、CSS 选择、事件绑定上行为完全一致，性能无差别。区别只在于“是否向外界传达结构意图”。
- 用
<section>包轮播控制按钮，等于告诉屏幕阅读器“这里是一个独立章节”，实际却无主题——这是误导 - 用
<div class="product-section">并不自动获得语义，类名不能替代标签含义 - 整页全用
<div>套娃，会让爬虫难以识别主次内容；滥用<section>则导致大纲混乱、权重稀释
判断依据就一条：这段内容能不能单独命名？
能命名 + 有标题 + 可出现在大纲中 → 用 <section>；否则用 <div>。
- ✅ “客户评价”“技术参数”“关于我们”——主题清晰，自带标题，应使用
<section> - ✅ 三篇并列博客文章，每篇用
<article>，整个列表容器用<section> - ❌ 导航栏、页脚图标组、表单字段分组、轮播箭头容器——无独立主题，一律用
<div>
