表示可独立分发的内容单元（如新闻、博客），仅是依附父容器的主题分组；前者需自带标题与时间等语义信息，后者必须配–小标题，二者不可互换。
学HTML页面结构优化，不是背标签列表，而是建立「结构即逻辑」的直觉——浏览器怎么解析、爬虫怎么理解、屏幕阅读器怎么朗读，都取决于你写的那一层嵌套、那个标签选择、那个标题层级。直接上手比看理论快得多。
为什么 <article></article> 和 <section></section> 不能互换用
这两个标签语义不同，浏览器和辅助技术会按规则处理：一个 <article></article> 表示可独立分发、有自己生命周期的内容（比如一篇博客、一条新闻），它隐含一个“可订阅”“可转发”的上下文；<section></section> 只是主题分组，必须依附于父容器才有意义。
- 错误写法：
<section><h2>作者信息</h2> <p>张三</p></section>—— 这个块既不独立，也没小标题支撑逻辑分组，纯属冗余 - 正确写法：整篇文章包在
<article></article>里，内部用<section></section>划分“背景”“方法”“结论”，且每个<section></section>必须带<h2></h2>或<h3></h3> - 检查方式：删掉周围所有内容，只留这个标签及其子元素——如果它还能被单独理解、引用、分享，那它大概率该是
<article></article>
嵌套超过三层就该警觉，但别数层数，要看目的
DOM嵌套深 ≠ 一定错，错在“为嵌套而嵌套”。比如用三层 <div> 实现一个卡片布局，本质是用结构换样式，代价是解析慢、CSS选择器难写、重排开销大。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>典型坏模式：<code><div class="wrapper"><div class="inner"><div class="content"><p>…</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a>
<p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p>
</div>
<a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></div></div></div>
display: grid 或 display: flex 直接控制子元素，把这三层干掉；或者改用 <article class="card"><p>…</p></article>，语义+样式一步到位<main></main> 下分 <section class="panel-left"></section>、<section class="panel-right"></section>，每块再放图表容器——这种是有明确职责划分的嵌套，不是堆砌标题层级崩了，八成是因为用了 <h4></h4> 伪装强调
<h1></h1> 到 <h6></h6> 是内容骨架，不是字号开关。跳级（<h1></h1> 后跟 <h3></h3>）、滥用（用 <h4></h4> 标作者名或时间）都会让爬虫和屏幕阅读器误判主次。
- 导语、作者、发布时间这些非章节内容，用
<p class="byline"></p>或<footer></footer>，别塞进 heading 标签 - 允许的最小跳跃是
<h2></h2>→<h3></h3>，禁止<h2></h2>→<h4></h4> - 检查工具：浏览器开发者工具里右键 → “检查可访问性树”，看 heading 是否形成连续、无断层的层级流
DOM 节点超 50 个就卡？关键看是不是同一父节点下
这个数字不是魔法阈值，而是经验线：单个容器下子元素太多，会导致 layout 计算变慢，尤其滚动或动态更新时。但拆解方式比数量更重要。
- 错误应对：把 100 条新闻硬塞进一个
<section></section>，再加overflow-y: auto—— 滚动仍卡，因为所有节点都在 DOM 树里挂着 - 有效做法：用虚拟滚动（如
react-window或原生IntersectionObserver+DocumentFragment批量插入），只渲染可视区前后几条 - 静态长列表？拆成多个
<section></section>，每块 30–40 项，用<h2></h2>做分组标题，既提升可读性，也降低单次 layout 范围
最常被忽略的点是：结构优化不是上线前的一次性任务，而是写每一行 HTML 时的条件反射——看到 <div> 就问一句“它有没有语义？能不能被更具体的标签替代？”，看到嵌套就点开开发者工具看 DOM 树深度。习惯一旦形成，优化就不再是“额外工作”，而是编码的自然节奏。</div>
