结论：仅靠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> 是原生支持的
<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> 当作页面核心主题信号，但仅靠它不够。必须和语义容器对齐，否则结构信号互相打架：
- 每个
<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 alt="语义化标签应用：提升HTML页面可维护性与SEO得分" >更具场景感
反例：<div class="chart-wrapper">
<img alt="语义化标签应用：提升HTML页面可维护性与SEO得分" ><div class="caption">... —— 这段 HTML 对爬虫和辅助技术毫无结构价值。
<p>最容易被忽略的点：语义标签不是“加了就完事”。浏览器不会因为写了 <code><nav></nav> 就自动加 focus 样式，也不会因为用了 <main></main> 就提升 SEO 权重 —— 它们的价值在于提供稳定、标准、可预测的 DOM 接口。一旦结构松动（比如 JS 动态插入一堆 <div> 覆盖原有语义），所有依赖它的逻辑（SEO、可访问性、自动化测试）都会失准。</div>
