用代替能赋予页面明确语义结构，因被浏览器、搜索引擎和屏幕阅读器识别为“banner”角色，而无此含义；一个页面可有多个，但顶层应紧贴，且内部应直接组织语义化内容而非嵌套无意义div。
为什么用 <header></header> 代替 <div class="header"> 不只是“换标签”
<p>因为浏览器、搜索引擎和屏幕阅读器会直接把 <code><header></header> 解析为“页面顶部区域”，而 <div class="header"> 在它们眼里只是个空容器，没有任何结构含义。你加了 class，机器并不认——它只认原生标签的隐含 role（比如 <code><header></header> 默认是 role="banner"）。
实操建议：
- 只要内容确实是页面或区块的头部（含 logo、主导航、搜索框等），就用
<header></header>；如果只是视觉上“看起来像头”，但语义上只是个装饰性横幅，那就该用<div> + CSS 控制样式 <li>一个页面可有多个 <code><header></header>（比如每个<article></article>自带一个），但顶层页面级的<header></header>应紧贴开始，不要嵌在无关 wrapper 里 - 别在
<header></header>里塞一堆<div> 再套 class——它本身已具备语义，内部结构应围绕内容逻辑展开，例如 <code><h1></h1>+<nav></nav>+<form></form><main></main>必须且只能出现一次，否则会破坏辅助技术导航屏幕阅读器靠
<main></main>快速跳转到核心内容。如果页面里有两个<main></main>，读屏工具可能只识别第一个，或报错忽略全部——用户得手动逐行听完整页才能找到正文。常见错误现象：
- SSR 框架（如 Next.js）在布局组件中重复渲染
<main></main>，导致子页面也带一个 - 用
<main></main>包裹侧边栏或广告位，误以为“主要展示区域”就是“主要” - 在
<iframe></iframe>或微前端子应用里擅自加<main></main>，脱离主文档上下文
正确做法：全页 DOM 中确保只有一个
<main></main>，且它包裹的是用户真正要读/操作的主体内容（如文章正文、产品列表、表单主区域），不包含导航、页脚、弹窗、广告。<nav></nav>里面没有链接，等于没用<nav></nav>的语义锚点是“导航功能”，不是“横向排列的菜单样式”。如果里面全是<span></span>、<div> 或 disabled 的 <code><button></button>，辅助设备会识别为role="navigation"但找不到可交互目标，反而造成困惑。使用场景与判断条件：
- 必须至少包含一个有效的跳转目标：带
href的<a></a>，或带onclick+role="link"的可聚焦元素 - 多个导航区需区分：主导航用
<nav></nav>，面包屑用<nav aria-label="Breadcrumb"></nav>，页内锚点导航加aria-label="Page sections" - 纯 JS 驱动的“导航”（如 tab 切换面板）不属于
<nav></nav>范畴，该用<section></section>+ ARIAtablist模式
标题层级断裂比不用语义标签更伤可访问性
很多团队花力气改了
<div> → <code><section></section>，结果<h1></h1>缺失、<h3></h3>直接跟在<h5></h5>后面，或在<main></main>外堆了三个<h1></h1>。这对屏幕阅读器来说，就像给地图删掉坐标轴再标经纬度——结构全乱。关键约束：
- 全页严格一个
<h1></h1>：代表页面唯一主题（如文章标题、产品名称），不可用作 logo 文字（logo 用<img alt="xxx">或纯文本 +aria-label） - 标题必须物理嵌套递进：不能靠 CSS 把
<h3></h3>视觉放大成“大标题”，也不能在<section></section>外写<h2></h2>再进<section></section>写<h1></h1> - 用浏览器 DevTools 的 Accessibility 面板检查 “Heading level” 树状图，确认大纲是否连贯——这是比 validator 更真实的可访问性验证
语义化最难的部分从来不是“怎么写对”，而是“怎么让每个标签都名副其实”。一个
<nav></nav>里没链接，一个<main></main>套着广告，一段跳级的<h></h>标签，都会让语义变成噪音。 - SSR 框架（如 Next.js）在布局组件中重复渲染
