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