语义标签是机器的“身份卡”，不是人类的“CSS类名”：浏览器、爬虫、屏幕阅读器只解析标签名映射的预定义角色，如<nav>即导航地标、<article>即独立索引单元、<time>提供结构化时间值；DOM结构与语义标签协同+标题层级构成机器可解析的逻辑树；误用（如<header>混装全局导航、<main>被包裹或空置）会直接干扰机器判断，导致无障碍失效、SEO降权或RSS抓取失败。
语义标签是机器的“身份卡”，不是人类的“CSS类名”
搜索引擎爬虫、屏幕阅读器、RSS聚合器这些工具不解析 class 或 id，也不猜你写的 "main-content" 是不是主内容。它们只认标签名本身映射的预定义角色。比如遇到 <nav></nav>，就直接认定这是导航地标（navigation landmark）；看到 <article></article>，就自动赋予 role="article" 并标记为可独立索引单元；读到 <time datetime="2026-08-25"></time>，就能提取结构化时间值，用于时效排序或日历聚合。
DOM结构 + 语义标签 = 机器可解析的逻辑树
单个标签只是身份声明，多个标签协同+标题层级才构成完整语义骨架：
-
<header></header>内嵌<h1></h1>→ 表示整个页面或区块的顶层主题 - 每个
<section></section>或<article></article>必须以<h2></h2>–<h6></h6>开头 → 否则无法生成有效文档大纲，屏幕阅读器将忽略其区块边界 -
<main></main>下直接跟<aside></aside>→ 明确表达“主内容与附属信息”的并列关系，而非视觉上的左右布局 - 连续标题（如主标+副标）应包裹在
<hgroup></hgroup>中 → 防止被解析为两个独立章节，破坏逻辑连贯性
误用语义标签等于给机器下错指令
这不是“效果差一点”，而是直接干扰机器判断：
- 把全站 logo、导航、搜索框、登录入口全塞进一个
<header></header>→ 模糊了“页面头部”与“内容区块头部”的边界，辅助工具无法区分全局入口与局部入口 - 用
<div id="wrapper"> 包住 <code><main></main>→<main></main>失去 landmark 地位，爬虫无法识别其唯一主内容属性 - 用
<div onclick="submitForm()"> 模拟按钮 → 屏幕阅读器朗读为“未命名的分组”，且无原生键盘支持（Tab聚焦、Enter激活），必须手动补 <code>role="button"和事件监听，极易遗漏语义缺失时，机器只能靠脆弱线索“猜”
没有语义标签，爬虫和辅助技术就退化成文本分析器：
立即学习“前端免费学习笔记（深入）”；
- 依赖
class="title"猜哪个是标题 → 类名改了或多人协作命名不一致，信号就断了 - 靠正则匹配
"Posted on.*\d{4}-\d{2}-\d{2}"提取发布时间 → 格式一变（如“昨天”“2小时前”），就抓不到 - 把所有内容当普通文本播报 → 用户无法按快捷键跳转到
<nav></nav>或<main></main>，必须逐行听完整页
语义化不是让网页“看起来更规范”，而是确保它在脱离样式、脱离人工干预时，依然能被机器稳定、准确地消费——这点在 RSS 抓取、AI 内容提取、跨平台聚合等场景里，往往就是可用与不可用的分界线。
- 依赖
