article用于可独立分发复用的内容（如博客正文），section用于有主题的页面内分组（如作者介绍）；导航栏等应选nav/footer/aside；div适用于纯布局或语义不明场景。
section 和 article 的语义边界在哪
两者都用来划分内容区块，但 section 表示“有主题的分组”，article 表示“可独立存在、可被重用的内容单元”。一个博客页面里，整篇博文用 article，而博文内的「作者介绍」「相关推荐」这类附属模块，更适合用 section。
常见错误是把所有块级容器都套 section——比如导航栏、页脚、侧边栏，它们既无主题性也不构成文档逻辑段落，应该用 nav、footer、aside 等更精确的语义标签。
嵌套关系与可独立性判断
article 可以嵌套在 section 里（如一个「新闻合集」section 下放多个 article），反过来则不合理。关键看能否脱离当前页面单独分发或复用：
- 这篇技术文章导出为 RSS 条目？→ 是 → 用
article - 这个「代码示例汇总」区块只在本页有意义，换页就失效？→ 否 → 用
section - 某段内容带自己的
header和footer，且标题能概括自身？→ 更倾向section（除非它本身是独立作品）
对 SEO 和辅助技术的实际影响
搜索引擎和读屏软件会依据语义标签构建内容大纲。误用 article（比如给每个产品卡片都加）会导致大纲层级混乱，反而稀释主内容权重；滥用 section 则让结构扁平化，丢失逻辑分组信号。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
性能上无差异，但兼容性要注意：article 和 section 在 IE8 及更早版本不被识别（需 document.createElement 修复或依赖 polyfill），若项目仍需支持旧 IE，得权衡语义价值与降级成本。
什么时候该用 div 而不是它们
当区块纯粹用于样式布局、JS 操作钩子，或语义无法明确归类时，div 仍是合理选择。例如：
- 一个仅用于 CSS Grid 容器的包裹层 →
div - 轮播图的外层容器，内部结构由 JS 动态生成 →
div - 尚未确定语义，但需要快速原型 → 先用
div，后续再重构
硬套语义标签比不用更危险——尤其当团队对 article 和 section 的理解不一致时，容易导致结构混乱。先厘清内容是否真具备“独立性”或“主题聚合性”，再选标签。
