<main>必须唯一且直接包裹核心内容，因其是页面唯一主干，多用或嵌套过深会导致爬虫降权、读屏器跳过；<article>用于可独立分发的内容（如博客），<section>用于主题内分块（如参数说明），混用会破坏结构信号；标题跳级（如h2后直接h4）断裂文档大纲，影响SEO与可访问性。
HTML 标签直接决定文档结构的可读性——不是靠视觉样式，而是靠语义嵌套层级和标签职责是否匹配内容逻辑。
为什么 <main></main> 必须唯一且包裹核心内容
搜索引擎和屏幕阅读器把 <main></main> 当作“页面唯一主干”，一旦出现多个、或被 <div> 包裹在深层嵌套里，它们会跳过或降权处理。常见错误包括：
<ul>
<li>SPA 路由切换后旧 <code><main></main> 没销毁，导致 DOM 中残留多个
<main></main> 包 <header></header> + <nav></nav> + 一堆 <div class="container">，但真正正文藏在第 7 层 <code><div> 里
<li>把广告位、登录框误塞进 <code><main></main>，让爬虫误判“主内容含营销干扰”实操建议：打开 Chrome DevTools → Elements 面板 → 手动展开 ，确认 <main></main> 直接子节点是 <header></header>、<article></article> 或正文段落，中间不能穿插无意义 <div>。
<h3>
<code><section></section> 和 <article></article> 的使用边界在哪
<section></section> 是主题内分块（如“参数说明”“返回值”“示例代码”），<article></article> 是可独立传播的内容单元（如一篇博客、一条新闻）。混用会导致结构信号混乱：
立即学习“前端免费学习笔记（深入）”；
- 用
<section></section>包裹整篇博客正文——错，它缺独立性，应改用<article></article> - 在
<article></article>内部用<section></section>划分小节——对，但需确保每个<section></section>有<h2></h2>或更高级别标题 - 把侧边栏推荐文章列表塞进
<section></section>而非<aside></aside>——错，<section></section>不表示“附属”，<aside></aside>才是语义正确的容器
性能影响：过度嵌套 <section></section>（比如 5 层嵌套）会让 Lighthouse 的 “Document structure” 检查直接报红，提示“大纲断裂”。
标题层级跳级为什么比样式丑更致命
爬虫和辅助技术依赖标题的嵌套关系生成文档大纲（Document Outline），<h2></h2> 下直接跟 <h4></h4> 会被解析为“<h2></h2> 结束，新主题从 <h4></h4> 开始”，中间内容丢失上下文。
- 常见现象：CSS 把
<h3></h3>视觉放大成最大字号，但 HTML 里漏写<h2></h2>，导致整个二级结构塌陷 - Vue/React 组件中动态插入标题时，没校验层级连续性，
<h2></h2>后直接 render 出<h4></h4> -
<h1></h1>放在<footer></footer>或<aside></aside>里——爬虫判定“标题与内容脱节”，直接忽略该标题权重
检查方法：用 axe 浏览器插件或 Lighthouse 运行 Accessibility 审计，看 “Heading levels should only increase by one” 是否报错。
真正影响可读性的从来不是标签数量，而是每个标签是否承担了它该承担的语义职责——<main></main> 不是装饰，<article></article> 不是 div 替代品，<h2></h2> 也不是字号开关。DOM 树越深，越要靠精准的语义标签锚定关键内容，否则再好的文案也沉底不被看见。
