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