html5语义化核心是向机器声明内容角色与关系，而非仅添加标签；通过语义标签（如、、）及其组合与标题层级，构建机器可解析的结构化文档骨架，错误使用将导致机器误判。
HTML5语义化提升机器阅读能力，核心不在“加了什么标签”，而在“告诉机器内容是什么角色、处在什么关系中”。它把网页从一堆视觉盒子，变成一份有身份、有层级、有职责的结构化文档。
语义标签是给机器读的“身份声明”
浏览器、搜索引擎爬虫、屏幕阅读器不看样式，也不猜 class 名。它们直接解析标签名，映射到预设的语义角色：
-
<nav></nav>→ 告诉机器：“这里是一组导航路径”，辅助工具会标记为 navigation landmark，用户可一键跳转 -
<main></main>→ 触发role="main"，且强制唯一，爬虫据此锁定页面核心内容区块 -
<article></article>→ 自动赋予role="article"，表明该内容可独立存在、可被 RSS 抓取、可单独分享 -
<time datetime="2026-06-24"></time>→ 同时提供人类可读文本（如“昨天”）和机器可解析值，支持日历聚合、时效性排序、SEO 时间权重计算
结构组合形成机器可理解的逻辑树
单个标签只是身份，多个标签协同+ heading 层级，才构成完整语义骨架：
-
<header></header>内嵌<h1></h1>：表示这是整个页面或某个区块的顶层主题 - 每个
<section></section>或<article></article>必须以<h2></h2>–<h6></h6>开头：否则无法生成有效文档大纲，屏幕阅读器将忽略其区块边界 -
<main></main>下直接跟<article></article>+<aside></aside>：明确表达“主内容与附属信息”的并列关系，而非视觉上的左右布局 - 连续标题（如主标+副标）应包裹在
<hgroup></hgroup>中：防止被解析为两个独立章节，破坏逻辑连贯性
语义与文档流共同决定机器解析顺序
标签语义不是静态描述，而是动态参与渲染与访问流：
- 所有块级语义容器（
<section></section>、<article></article>、<nav></nav>）默认独占一行，天然形成内容分隔单元 - 屏幕阅读器按 DOM 顺序播报：
<header></header>→<nav></nav>→<main></main>→<aside></aside>→<footer></footer>，这正是语义流与文档流一致的结果 - 若用
position: absolute把<nav></nav>拉到页面右侧，视觉位置变了，但 DOM 顺序未变——机器仍按原逻辑流处理；若强行调整 DOM 顺序，则可能打乱语义预期 - 把
<main></main>包在<div id="wrapper"> 里，虽不影响显示，却让 <code><main></main>失去 landmark 地位，爬虫无法识别其唯一主内容属性错误语义会直接干扰机器判断
误用不是“效果差一点”，而是“机器得到错误指令”：
- 用
<header></header>包裹全站 logo + 导航 + 搜索框 + 用户登录入口：模糊了“页面头部”与“内容区块头部”的边界，导致辅助工具无法区分全局入口与局部入口 - 把友情链接、产品推荐放进
<nav></nav>：机器将其识别为导航路径，视障用户会被引导去“跳转”这些非导航链接 -
<section></section>没配标题：失去“主题区段”语义，既无法生成大纲，也被视为无效区块，SEO 权重归零 - 用
<div class="post"> 替代 <code><article></article>：对机器而言，这只是个空容器，需额外分析 class、CSS、上下文才能推测用途，效率大幅下降
- 用
