HTML结构需严格遵循语义化层级：DOM深度≤6层，H1唯一且包裹核心内容，标题按h1→h2→h3递进嵌套，nav仅含主导航，article/section合理分块，避免语义错配。
HTML结构层级不合理，搜索引擎可能直接忽略关键内容，用户也容易迷失在混乱的页面里。这不是理论风险——DOM树深度超6层、<main></main>缺失或重复、标题标签嵌套错位，都会导致首屏文本不被索引、H1权重稀释、屏幕阅读器跳过正文等真实后果。
DOM树深度超过6层时，爬虫会截断解析
搜索引擎对单个HTML文档的解析有资源限制。当
嵌套过深（比如
<div class="wrap"><div class="inner"><div class="content">...</div></div></div>），且中间没有语义标签中断时，<h2></h2>以下的文本常不被收录，哪怕它在视觉上完全可见。
- 用浏览器开发者工具的“Elements”面板手动数层级：从
开始，到目标段落的父节点，不超过6层 - 把纯CSS驱动的嵌套替换成语义分层，例如用
<main><article><section></section></article></main>自然降级，而非堆<div> <li>SSR/SSG项目中检查<code>document.body.innerHTML在首屏完成时是否已含全部关键文本；动态插入延迟＞500ms的内容大概率不进索引 -
<main></main>只能出现一次，且必须直接子元素包含页面真正要传达的信息（如博客正文、商品详情、表单主体） - 不能把广告位、相关推荐、页脚链接塞进
<main></main>——这些应归入<aside></aside>、<footer></footer>等对应语义区域 - 若用框架（如Next.js、Nuxt），确认服务端渲染输出中
<main></main>存在且包裹了首屏关键内容，而不是靠JS运行后才注入 -
<h1></h1>应全页唯一，出现在<main></main>内，且包含页面核心关键词 - 子级标题严格按层级递进：
<h2></h2>→<h3></h3>→<h4></h4>；同一逻辑层级用相同级别（如多个章节并列都用<h2></h2>） - 避免在
<footer></footer>或<aside></aside>里放<h1></h1>—<h3></h3>，这类区域的标题应使用<h4></h4>及以下，或改用<p></p>加<strong></strong> -
<nav></nav>只包真正用于站点导航的链接（主导航、面包屑），页脚“关于我们”“联系我们”不算导航，别硬塞进去 -
<article></article>用于可独立分发、复用的内容（如一篇博文、一条新闻、一个产品卡片） -
<section></section>用于同一主题下的逻辑分块（如“参数说明”“返回值”“使用示例”），不能替代<article></article>包裹全文
<main></main>必须唯一，且包裹全部核心内容
漏掉<main></main>，搜索引擎无法准确定位页面主体；重复出现，则判定为结构混乱，降权处理。它不是可选装饰，而是内容主次关系的锚点。
<h1></h1>到<h6></h6>必须按逻辑嵌套，不可跳跃或倒置
标题不是样式开关，而是内容权重信号。把<h3></h3>放在<h1></h1>前面，或跳过<h2></h2>直接用<h4></h4>，会让搜索引擎认为你在混淆主次，降低整块内容的相关性得分。
立即学习“前端免费学习笔记（深入）”；
<nav></nav>、<section></section>、<article></article>不能互换使用
标签语义错配比不用语义标签更危险。把广告链接放进<nav></nav>，或把整篇博客塞进<section></section>而非<article></article>，会被视为干扰信号，影响导航识别与内容独立性判断。
最常被忽略的一点是：语义标签的价值不在于“用了”，而在于“嵌套逻辑是否自洽”。一个<header></header>里塞了三个<h1></h1>，比不用<header></header>更伤SEO。
