header必须为body或语义容器的直接子元素，main只能出现一次且为body直系子元素，footer表示结尾信息不可滥用；三者嵌套错误会破坏可访问性、seo及html5大纲。
这三个标签不是“换皮div”，用错位置或嵌套方式，会直接破坏可访问性、SEO 和 HTML5 大纲生成。
header 必须作为
浏览器和屏幕阅读器靠父级上下文判断 <header></header> 的作用范围：放在 下就是全站页眉；包在 <article></article> 里就是这篇文章自己的标题区。常见错误是把它塞进 <div class="header"> 或丢进 <code><footer></footer> 里——前者完全丢失语义，后者逻辑矛盾。
- 正确：
<header><h1>首页</h1> <nav>...</nav></header><main>...</main> - 也合法：
<article><header><h2>博客标题</h2> <p>作者：张三</p></header><p>正文...</p></article> - 错误：
<div><header>...</header></div>（降级为普通容器） - 错误：
<footer><header>...</header></footer>（语义冲突，footer 内不应有 header）
<main></main> 只能出现一次，且必须是
这是最常被忽略的硬性约束。<main></main> 不是“内容区 class”，而是 landmark 角色标识符。W3C 明确规定它只能有一个，且不能被 <header></header>、<footer></footer>、<nav></nav>、<aside></aside> 等任何 sectioning content 包裹。否则 Lighthouse 会报 “multiple main landmarks”，NVDA 会提示结构异常。
- 正确：
<header>...</header><main>...</main><footer>...</footer> - 错误：
<div><main>...</main></div>（被 div 包裹，失去 landmark 意义） - 错误：
<header><main>...</main></header>（<main></main>被<header></header>包住，违反嵌套规则） - 动态渲染时也要注意：tab 切换后新内容必须插入到已有
<main></main>内部，不能删旧<main></main>再建一个新的
<footer></footer> 不只是页面底部装饰，它有明确语义边界
<footer></footer> 表示“页面或区块的结尾信息”，比如版权、联系方式、相关链接、返回顶部按钮。它可以出现在 底部，也可以出现在 <article></article> 或 <section></section> 内部——但绝不能用来包裹广告位、悬浮菜单或与“结尾”无关的内容。
- 全局 footer 正确位置：
的最后一个直系子元素 - 章节级 footer 合法：
<article><footer><p>作者：李四</p></footer></article> - 错误：
<footer><nav>...</nav></footer>（把主导航塞进页脚，语义错乱） - 错误：
<footer><div class="ad-banner">...</div></footer>（广告不属于页脚语义范畴）
真正难的不是写对标签名，而是每次敲下 <header></header> 时，得想清楚：这个头部，到底属于谁？是整个页面，还是某篇文章，或是某个小节？一旦父容器选错，语义就塌了一半。
