结论：仅靠CSS/JS修饰div会导致维护困难、SEO失效和可访问性缺失；必须用语义化标签（如main、nav、article）并遵循嵌套规则与标题层级，才能保障结构稳定性和技术兼容性。

直接说结论：不改语义结构，只调CSS或加JS，页面迟早会变成“改一处崩三处”的泥潭；搜索引擎和屏幕阅读器也不会因为你写了 class="main-content" 就把它当

看。

为什么 <div> 套 <code><div> 会让协作和维护变困难<p>当整个页面由 <code>class="wrap"、class="container-v2"、class="header-fix-2024" 构成时，没人能靠看 HTML 就判断出哪个是主导航、哪个是正文、哪个该被 SEO 抓取。开发者必须来回切 CSS 文件、查 JS 绑定逻辑、翻设计稿才能确认作用域——这不是写代码，是在考古。

更现实的问题是交接后：class="nav-active" 和 class="nav-new" 同时存在，没人敢删，也不敢动。因为 <div> 不带任何语义，浏览器、爬虫、新同事都得靠猜。<ul> <li>DOM 查询不稳定：JS 里写 <code>document.querySelector('.content')，结果另一个模块也用了相同 class，逻辑错乱

可访问性失效：屏幕阅读器无法识别 <div role="navigation"> 是否真该被当作导航跳转区，而 <code><nav></nav> 是原生支持的

SEO 信号弱：Googlebot 不解析 class 名，它依赖的是 <main></main>、<article></article> 这类标签提供的结构化信号

哪些语义标签必须用，且不能嵌套错

不是所有语义标签都能随便套。几个关键约束直接影响渲染逻辑和爬虫理解：

• <main></main> 每页只能出现一次，且不能嵌套在 <article></article>、<aside></aside>、<header></header>、<footer></footer> 或 <nav></nav> 内部
• <article></article> 表示独立可分发的内容（如一篇博客），可嵌套 <header></header> 和 <footer></footer>，但不要用它包裹整页导航
• <section></section> 必须有明确主题，且建议配一个 <h2></h2>～<h6></h6> 标题；纯视觉分隔不用它
• <aside></aside> 只用于与主内容相关但可独立存在的信息（如侧边推荐、作者简介），不是“右边那个 div”

错误示例：<main><article><main>...</main></article></main> —— 第二个 <main></main> 会被浏览器忽略或报 warning，爬虫也可能丢弃这部分内容。

标题层级与语义标签怎么配才不被 SEO 降权

搜索引擎把 <h1></h1> 当作页面核心主题信号，但仅靠它不够。必须和语义容器对齐，否则结构信号互相打架：

plan-fractional-cfo-firm-local-seo-faq-cluster

调研本地问题，归类整理，为兼职CFO公司起草可直接发布的FAQ文案。用于本地SEO工作...

下载

• 每个 <article></article> 应有自己的 <h2></h2>（不是 <h1></h1>），避免全页多个 <h1></h1>
• <main></main> 内部第一个标题应为 <h1></h1>，代表整页主旨；后续区块用 <section></section> + <h2></h2> 分层
• 跳级使用标题（如 <h1></h1> 后直接 <h3></h3>）会破坏结构可信度，部分 SEO 工具会标为“警告”
• <header></header> 里的 <h1></h1> 是页面级标题；<article></article> 里的 <header></header> 里的 <h2></h2> 是文章级标题 —— 两者语义不同，不能混用

简单验证法：用 Chrome 开发者工具 → Elements 面板，右键任意语义标签 → “Inspect accessibility properties”，看是否被正确识别为“main landmark”或“article”。

<figure></figure> 和 <figcaption></figcaption> 不只是给图片加说明

很多人以为 <figure></figure> 就是“带 caption 的图”，其实它本质是“自包含的流内容单元”，适用范围比想象中广：

• 图表、代码块、引用块、短视频片段都适用 <figure></figure>，只要它们能脱离上下文独立存在
• <figcaption></figcaption> 必须是 <figure></figure> 的第一个或最后一个子元素，否则语义断裂
• 搜索引擎会把 <figure></figure> 内容和 <figcaption></figcaption> 文本联合索引，提升图文匹配度；纯 <img alt="..."> 缺少上下文关联
• 屏幕阅读器会把 <figure></figure> 读作“figure, 图表：XXX”，比单独读 <img> 更具场景感

反例：<div class="chart-wrapper"> <img><div class="caption">... —— 这段 HTML 对爬虫和辅助技术毫无结构价值。<p>最容易被忽略的点：语义标签不是“加了就完事”。浏览器不会因为写了 <code><nav></nav> 就自动加 focus 样式，也不会因为用了 <main></main> 就提升 SEO 权重 —— 它们的价值在于提供稳定、标准、可预测的 DOM 接口。一旦结构松动（比如 JS 动态插入一堆 <div> 覆盖原有语义），所有依赖它的逻辑（SEO、可访问性、自动化测试）都会失准。</div>