因为div没有语义，只是空容器，搜索引擎和读屏软件无法识别其功能意图；必须用nav、main、article等语义标签明确声明导航、主体、独立内容等角色，否则导致seo降权、读屏器跳过关键区域、lighthouse报错。
为什么搜索引擎和读屏软件会跳过你的 div 块
因为 div 没有语义，它只是个空容器。浏览器、爬虫、屏幕阅读器看到 div，只能知道“这里有一块内容”，但不知道“这是导航”“这是正文”“这是作者信息”。它们依赖的是 nav、main、article、time 这类带明确含义的标签来构建理解路径。
常见错误现象包括：SEO 收录缓慢、读屏软件朗读顺序混乱、Lighthouse 可访问性评分偏低（尤其在 “Landmark elements” 项报错）。
-
main必须且只能出现一次，多个main会被解析为结构冲突 -
aside不等于“右边那个栏”——它必须与相邻article或section有逻辑关联（如相关阅读、作者简介），否则应改用section -
section不是万能分组：它要求内部至少有一个标题（h1–h6），否则语义失效，退化为div
哪些标签必须配 time 或 cite 才算真正语义化
不是所有时间或引用都适合裸写。机器识别依赖显式标记：
- 发布时间、更新时间、事件日期必须用
time标签包裹，并带上datetime属性（如<time datetime="2026-06-15">今天</time>），纯文本 “2026年6月15日” 对爬虫毫无意义 - 引用出处必须用
cite，且仅用于来源名称（书名、文章标题、人名），不是整段话；整段引用要用blockquote，穿插短句引用用q -
figure+figcaption是图片/图表的最小语义单元，img单独存在时，即使有alt，也不代表它是独立可引用的内容块
nav 和 header 的嵌套边界在哪
很多页面把整个顶部区域塞进 header，再在里面硬塞 nav，结果导致导航被误判为“页头附属物”而非独立导航区。关键判断依据是功能独立性：
-
nav应该只包裹**全局导航链接集合**（如首页、产品、博客、联系），不包含 logo、搜索框、用户头像等非导航元素 - logo 和站点标题属于
header，但不应放在nav内；搜索框若为全站通用，建议用form+label独立放置，不要塞进nav - 一个页面可以有多个
nav（如顶部主导航 + 侧边分类导航 + 文末相关文章导航），但每个都必须有明确作用域，避免堆砌
AI 生成的 HTML 为什么总在语义上翻车
不是 AI 不懂语义，是它没拿到足够约束。默认提示词如“写个博客页面”只会触发训练数据中最常见的 div 套路，因为它最安全、兼容性最高、出错率最低。
- 必须在提示中明确指定标签名：比如要求 “用
article包裹每篇博文，用time标记发布日期，用footer包含版权和作者信息” - 禁止模糊描述：“内容区”“侧边栏”“头部”这类词会让 AI 回退到
div；换成 “主文章内容”“与当前文章强相关的推荐列表”“页面级页脚”更有效 - 生成后务必检查
main是否唯一、article是否遗漏header（含标题+元信息）、aside是否真有上下文关联——这些点 AI 几乎从不主动补全
语义化最难的部分不在标签选择，而在持续判断“这段内容对机器来说意味着什么”。写完一段 HTML，不妨关掉样式，用 Chrome 的 “Accessibility” 面板看它如何被读屏软件解析——那才是代码真正被“看懂”的时刻。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
