应优先用<article>而非<section>，当内容可独立分发、RSS抓取或搜索引擎索引时；<section>仅适用于有标题的主题单元，且必须含<h2>–<h6>标题，否则语义失效。
不能靠堆砌语义标签来“精细分块”，真正的精细分块靠的是语义层级 + DOM 职责分离 + CSS 布局配合，而不是多写几个 <section> 或 <article>。
什么时候该用 <section> 而不是 <div>
关键看内容是否构成一个「有标题的主题单元」。比如「前端工具推荐」这个标题下并列介绍 Webpack、Vite、ESBuild，就适合用 <section> 包裹；但如果只是为加个边框或背景色而套一层容器，<div> 更准确——强行语义化反而误导辅助技术。
-
<section>必须含标题（<h2>–<h6>），否则浏览器和屏幕阅读器无法建立结构认知 - 同一页面中多个
<section>之间应存在逻辑并列或递进关系，不能纯为样式控制嵌套 - 若内容可被 RSS 抓取、单独分享或搜索引擎索引（如一篇教程、一条产品公告），优先用
<article>，不是<section>
<main> 和 <article> 的嵌套边界在哪
<main> 是页面级容器，只能出现一次，且必须直接包裹核心内容；<article> 是内容级单元，可嵌套在 <main> 内，但不可反过来——<main> 不能塞进 <article> 或 <section> 里。
- 错误写法：
<article><main>...</main></article>—— 破坏可访问性树，部分屏幕阅读器会跳过<main> - 正确结构：一个
<main>下可包含多个<article>（如博客列表），也可混合<section>（如「关于我们」「服务流程」） - 登录框、搜索栏、页头通知栏这些非核心内容，哪怕视觉上在“主区域”内，也不该放进
<main>
侧边栏用 <aside> 还是 <div>
<aside> 只适用于与当前上下文存在语义关联的补充信息，比如文章末尾的「作者简介」、技术文档旁的「兼容性说明」；纯广告位、无关推荐、全局导航栏都不该用它。
立即学习“前端免费学习笔记（深入）”；
- 有效场景：
<article><header><h1>CSS Grid 教程</h1></header><p>...</p><aside><h3>浏览器支持</h3><p>Chrome 57+ 支持...</p></aside></article> - 无效场景：页脚里的「关注我们」社交链接组，该用
<nav aria-label="社交导航">，不是<aside> - 如果侧边内容与主内容完全无关（如第三方广告 JS 插入的 banner），用
<div role="complementary">更稳妥
嵌套过深时怎么保语义又不 bloated
DOM 层级超过 4 层后，CSS 选择器匹配成本陡增，滚动性能也会受影响。此时要主动拆解：用 Flexbox/Grid 替代中间层 <div>，把语义标签当布局锚点而非装饰壳。
- 避免：
<section><div class="wrapper"><div class="inner"><p>内容</p></div></div></section> - 推荐：
<section><p>内容</p></section>+ CSS 中用section { display: grid; }控制内部对齐 - 动态生成的内容（如评论列表）用
DocumentFragment批量插入，别让每个<article>都触发一次重排
最易被忽略的一点：语义标签本身不解决布局问题，<header> 不等于「顶部固定栏」，<aside> 也不会自动右浮动——它们只声明意图，具体表现仍需 CSS 显式定义。别指望加了语义标签就万事大吉。
