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