section 和 div 的本质区别：语义有没有，搜索引擎和读屏器看不看得懂
根本区别就一条：
告诉浏览器“这里是一块有主题的内容”，
只说“这里我随便划了个框”。前者能被屏幕阅读器识别为逻辑章节，能帮 google 理解你的页面结构；后者对语义解析器来说等于透明——它只认 class、id 或 ARIA 属性。
- 用
- 用 时，你完全可以不写标题，甚至里面塞一堆按钮、图标、动画容器都没问题
- seo 不会因为多几个
套娃）会让爬虫更难提取核心内容什么时候非得用 section，不能用 div？
不是“能用就用”，而是“该用才用”。判断标准很实在：这段内容能不能单独拎出来，让人一眼看懂它在讲什么？
- ✅ 适合
客户评价
“产品响应超快！”
- ✅ 也适合
技术栈
- react 18
- typescript
- ❌ 别硬套
- ❌ 别滥用嵌套：
… div 还没过时？它现在最不可替代的用途是什么
不是“老古董”，而是“万能挂钩”。它唯一不可替代的价值，就是当你**不需要语义，只需要一个可控的块级盒子**时。立即学习“前端免费学习笔记（深入）”；
- 做 css Grid / flex 布局的直接父容器：
- 作为 JS 操作锚点：
- 包裹 svg、canvas、webgl 渲染区 —— 这些本就不属于文档语义流，用
- 微前端子应用挂载点：
容易被忽略的兼容性与实操细节
别以为写了
就万事大吉。有些坑，只有上线后被读屏器念错、或被 lighthouse 报“结构性问题”才意识到。
- 每个
- 不要用
- 旧版 IE（IE8 及以下）不支持
- Lighthouse 的“Document structure”审计项会检查
我们的团队
由 12 名全栈工程师组成
由 12 名全栈工程师组成
语义标签不是装饰，是给机器读的说明书。写
前，先问一句：这段内容，脱离上下文还能自证身份吗？不能，就老实用
。 - 不要用
- ❌ 别滥用嵌套：
- seo 不会因为多几个