必须且只能出现一次，是页面唯一主内容语义锚点，不得嵌套于、、等任何分区元素内，否则破坏可访问性、seo及lighthouse检测。
别急着写 <div>，先看内容本身想表达什么——语义化不是加标签，是做判断。
<h3>什么时候该用 <code><header></header> 而不是 <div class="header">
<p>关键不是“它在页面顶部”，而是“它是否承载页面或章节的介绍性内容”。比如一个 <code><article></article> 里也有自己的标题、作者、发布时间，那它内部就该用独立的 <header></header>，而不是只给整个页面顶部套一个。
常见错误现象：<header></header> 嵌套在 <footer></footer> 里、多个 <header></header> 套娃、用它包广告横幅（广告不属于介绍性内容）。
实操建议：
-
<header></header>可以出现在顶层，也可出现在<article></article>、<section></section>内部 - 里面通常包含
<h1></h1>–<h6></h6>、<logo></logo>（用<img>或文字）、<nav></nav>、搜索框等 - 不要仅因样式需要而用它；如果只是加个背景色+居中文字，
<div> 更诚实 <h3> <code><nav></nav>不等于“所有导航链接”它专指页面中主要的、全局性的导航区块，比如主导航栏、页内锚点跳转菜单。侧边栏里的“相关文章链接”、页脚里的“友情链接”，都不适合用
<nav></nav>。使用场景：
- 顶部横向导航条（含首页、产品、关于、联系）
- 移动端汉堡菜单展开后的主链路列表
- 长文档内的章节跳转目录（前提是这个目录是核心导航路径）
容易踩的坑：
- 把分页组件（上一页/下一页）单独包一层
<nav></nav>—— 它更适合放在<footer></footer>或直接用<div> <li>每个 <code><ul></ul>都套<nav></nav>，导致屏幕阅读器反复播报“navigation” - 忘记给
<nav></nav>加aria-label（如aria-label="主导航"），多导航时无法区分 - 一个 HTML 文档中只能有一个
<main></main>，且不能是<article></article>、<aside></aside>、<footer></footer>等的子元素 - IE 不支持
<main></main>（需 polyfill 或降级为<div role="main">） <li>如果页面是仪表盘，<code><main></main>应包裹数据卡片区，而不是左侧菜单 - 整个页面底部用一个
<footer></footer>包住版权 + 友情链接 + 社交图标 + 订阅表单 —— 其中只有版权信息真正属于页面级<footer></footer> - 在
<article></article>末尾放作者信息，却用<div class="author-meta">，其实该用 <code><footer></footer>实操建议：
- 页面级
<footer></footer>放在底部，含版权、备案号等 -
<article></article>或<section></section>内部的<footer></footer>可放作者、发布日期、编辑时间、评论入口等 - 避免在
<footer></footer>里塞大段交互逻辑（如登录表单），它语义上不承载操作主干
语义化最难的不是记住标签名，而是每次写标签前停半秒：这个区块对用户、机器、搜索引擎来说，到底“是什么”，而不是“看起来像什么”。
- 页面级
<main></main>是单页唯一且不可嵌套的“内容心脏”它代表当前文档中与主题最相关、独一无二的内容主体。搜索引擎和屏幕阅读器靠它快速定位核心信息。
参数差异 / 兼容性影响：
性能提示：某些 SSR 框架会基于
<main></main>做首屏内容提取，乱用会导致 SEO 内容识别错位。<footer></footer>的范围常被高估它不是“页面最底下那一块”，而是“紧贴其所归属内容区块的结尾部分”。可以有多个，且层级分明。
常见错误现象：
