语义是内容在文档中的角色声明，非样式表现；表示全页唯一主内容区，是屏幕阅读器可跳转的导航地标，/可嵌套于等区块中表其头部/尾部。
HTML语义化标签不是“换掉 语义不是指“看起来像什么”，而是“它在页面中承担什么功能”。 常见错误现象： 三者都描述内容区块，但语义强度和嵌套逻辑不同： 性能影响小，但 SEO 和可访问性影响直接：Google 明确将 使用场景判断： 容易踩的坑：在每个卡片组件里都包一层 IE9 及更早版本不原生支持语义化标签，但现代项目基本无需考虑。真正需要注意的是： 最常被忽略的一点：<main></main> 表示唯一主内容区，<nav></nav> 不只是“放链接的盒子”，而是被屏幕阅读器识别为可跳转的导航地标。
什么是“语义”？不是样式，是角色声明
<header></header> 不等于“顶部有 logo 的 div”，它代表一个区块的头部（可以嵌套在 <article></article> 里）；<footer></footer> 同理，不单指页面底部，也可能是某篇 <article></article> 的作者信息区。<div class="header"> 包裹，却没用 <code><header></header> —— 机器无法识别其结构性意图
<main></main> 出现在同一页面 —— 违反 HTML 规范，部分辅助技术会忽略后续的 <main></main>
<p></p> 包裹按钮或链接，只因“它在段落位置” —— <p></p> 表示独立段落文本，不是布局容器
<main></main>、<article></article>、<section></section> 怎么选？看内容独立性与层级
<main></main>：全页面**唯一**，包裹所有核心内容（不含导航、侧边栏、页脚等），搜索引擎和读屏器靠它快速定位主体<article></article>：内容**可独立分发/复用**，如博客文章、新闻条目、用户评论。可嵌套在 <main></main> 或 <section></section> 中<section></section>：仅表示**逻辑分组**，无独立语义权重。例如“产品介绍”“用户评价”两个区块，用 <section></section> 划分比用 <div> 更明确，但不能替代 <code><article></article>
<main></main> 作为内容可信度信号之一；NVDA 等读屏器支持 main landmark 快速跳转。为什么
<nav></nav> 不能随便套？它自带交互契约<nav></nav> 不是“有链接的地方就加”，它意味着该区域提供**全局或主要导航路径**。浏览器扩展、读屏器会将其识别为“导航地标”，用户可通过快捷键（如 NVDA + Insert + N）直接跳入。
<div role="navigation"> 更合适）、文章内超链接、侧边“相关推荐”链接列表（属于 <code><aside></aside>）
<nav></nav>，结果页面出现十几个导航地标，反而干扰用户定位。兼容性不是借口，但得知道底线在哪
<header></header> 等默认显示为 display: block，但若用了 Normalize.css 或自定义 reset，需确认未意外设为 inline
<div> 时（如 SSR 框架限制），可用 <code>role="main"、role="navigation" 等补语义，但优先级低于原生标签
<main></main> 放进 <article></article> 或 <aside></aside> —— W3C 明确禁止，部分解析器会静默降级<header></header> 和 <footer></footer> 可以出现多次，但每个都必须服务于其父元素的内容结构；滥用它们堆砌语义，反而稀释了真正关键区域的信号强度。
