语义化标签替代冗余div可精简嵌套、明确职责、提升可访问性与可维护性，如用替代多层div，优先选用等原生容器，避免过度嵌套。
用语义化标签替代冗余 div，是精简嵌套最直接有效的方式。关键不在于“少写几层”，而在于让每一层都有明确职责，避免为样式或布局强行加壳。
优先选用原生语义容器，减少无意义包裹
多数页面结构本不需要多层 div 套娃。比如导航栏，传统写法常是 <div class="nav"><div class="container"><ul>...</ul></div></div>；换成语义化写法，直接用 <nav><ul>...</ul></nav> 即可。浏览器默认支持，屏幕阅读器能识别，CSS 也更容易定位。
-
<header></header>替代<div class="header">，无需额外容器 <li> <code><main></main>直接包裹主体内容，不套<div class="wrapper"> <li> <code><aside></aside>本身已是侧边容器，内部不用再加<div class="sidebar"> <li> <code><figure></figure>+<figcaption></figcaption>天然组合图文，不必用 div 包图片再包文字 -
<main></main>下直接放<article></article>或<section></section>，不建议再包一层<div> <li> <code><article></article>内的<header></header>是文章头部，不是页面头部，作用范围清晰 - 同一层级多个同类区块，用并列
<section></section>，而非嵌套<section><section></section></section> - 遇到复杂布局时，优先用 CSS Grid / Flexbox 控制视觉位置，而非靠多层语义标签“撑结构”
- 每个
<section></section>和<article></article>应以<h2></h2>或对应层级标题起始 - 标题必须连续递进，
<h2></h2>后接<h3></h3>，不跳到<h5></h5> - 不要用
<div> + CSS 模拟标题，应真实使用 <code><h2></h2>～<h6></h6> -
<main></main>中首个标题通常为<h1></h1>（全页唯一），后续区块用<h2></h2>开始 -
<header></header>、<nav></nav>、<section></section>属于 sectioning content，不能作为<p></p>的子元素 -
<main></main>必须是的直接子元素之一，不可嵌套在其他语义块内 -
<article></article>内可含自己的<header></header>和<footer></footer>，但它们只服务于该文章，不干扰外层结构 - 不确定是否合法时，查 W3C 文档中各标签的“Permitted content”说明
控制嵌套深度，避免四层以上连续语义标签
语义标签虽好，但堆叠过深反而削弱可读性。例如 <section><article><section><div>...</div></section></article></section> 就属于过度嵌套。合理层级通常是：外层结构（<header></header>/<main></main>/<footer></footer>）→ 内容单元（<article></article> 或 <section></section>）→ 内容片段（<header></header>、<p></p>、<time></time> 等）。
用 heading 层级锚定结构，避免空有语义无骨架
语义标签需要配合合理的 heading 结构才能形成有效大纲。一个 <section></section> 若没有 <h2></h2> 或更高级别标题，就只是个普通分组，无法被辅助工具或搜索引擎识别为独立主题区块。
立即学习“前端免费学习笔记（深入）”；
警惕非法嵌套，守住语义边界
某些标签天生不能互相嵌套，强行套用不仅无效，还会破坏文档大纲。比如 <p></p> 只能装文本级内容，不能包 <header></header> 或 <section></section>；<main></main> 也不能放在 <article></article> 或 <aside></aside> 里面。
