因为浏览器和辅助技术依赖标签语义而非class名识别内容角色，<div>无内置语义，而<article>标识独立可分发内容、<nav>明确声明导航区域，替换会导致屏幕阅读器无法识别结构、SEO降权及无障碍测试失败。
为什么 <div> 不能代替 <article> 和 <nav>
因为浏览器和辅助技术（比如读屏软件）不靠视觉布局识别内容结构，而是依赖标签的语义。用 <div> 套一堆导航链接，对屏幕阅读器来说就是“一段没名字的普通容器”，它不会告诉用户“这是导航区”。而 <nav> 一出现，读屏器会直接报“导航”；<article> 会说明“独立内容区块”，连标题层级、发布时间都能被正确解析。
常见错误现象：
– 页面用十几个 <div class="header"> <div class="sidebar">，SEO 抓取不到结构信息
– 无障碍测试工具（如 axe）报 landmark-no-duplicate 或 region 缺失警告
– 搜索引擎收录时正文和广告区权重混淆
- 优先级：有语义标签就不用
<div>+ class 模拟，哪怕只多写几个字符 -
<main>必须且只能出现一次，代表页面核心内容，不能嵌套在<article>或<aside>里 -
<section>不等于“一个视觉区块”，它需要有标题（<h2>–<h6>），否则语义不成立
<time> 和 <datetime> 已经不存在了
很多人面试时还提 <datetime>，这是 HTML4 的遗留说法。HTML5 只保留 <time>，且它的 datetime 是属性，不是标签名。写成 <datetime>2023-01-01</datetime> 是无效 HTML，浏览器会当成未知标签处理，语义完全丢失。
正确用法：
立即学习“前端免费学习笔记（深入）”；
<time datetime="2023-01-01">2023年1月1日</time> <time datetime="2023-01-01T14:30">下午2:30</time>
-
datetime属性值必须符合 ISO 8601 格式（如YYYY-MM-DD或YYYY-MM-DDThh:mm），否则无法被机器解析 - 显示文本可以是中文、带括号等任意格式，但机器只认
datetime属性值 - 不要用
<span>+ title 模拟时间，搜索引擎和读屏器都忽略title
面试官真正在意的不是背标签列表，而是你怎么判断该用哪个
他们想看的是你有没有建立“内容意图 → 结构表达 → 机器可读”的条件反射。比如给一段用户评论，你第一反应不是“这里加个 <div>”，而是：“这是独立可复用的内容单元 → 用 <article>；里面有个作者头像和昵称 → <figure> + <figcaption> 更合适；时间戳 → 必须上 <time datetime="...">”。
- 遇到不确定的标签（比如
<aside>vs<section>），先问自己：“删掉这部分，主内容是否依然完整独立？” 如果是，大概率是<aside> - 表单控件别忘了
<fieldset>+<legend>，这对分组 radio/checkbox 的无障碍支持至关重要 - 语义化不是终点：标签选对了，但
aria-*乱加（比如给<nav>再加role="navigation"）反而会干扰读屏器
容易被忽略的兼容性细节
老项目常混用 XHTML 风格自闭合标签（如 <img />），但在 HTML5 中，<img>、<input>、<meta> 等 void elements 不允许斜杠闭合。虽然浏览器大多容错，但某些 SSR 框架或 HTML 解析器（如 JSDOM 测试环境）会报 warning，甚至影响服务端渲染的 DOM 结构。
- 验证工具推荐用 W3C Markup Validation Service，粘贴 HTML 就能看语义和语法问题
- IE 支持语义标签需
document.createElement("article")或引入 html5shiv，但现在基本不用考虑 - 真正麻烦的是 CMS 输出的富文本：它默认只输出
<p><strong>，得靠后处理或编辑器配置补全<figure>、<time>等
语义化不是贴标签比赛，关键在每次写 HTML 时，多停半秒问一句：“这段内容，对机器来说，它‘是什么’，而不是‘看起来像什么’。”
