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