header、main 和 footer 是语义化容器，必须严格遵循嵌套规则：header 只能直属于 body/article/section；main 必须唯一且仅直属于 body；footer 表示结尾信息，可属 body/article/section，但不可含广告或导航。
Header、Main 和 Footer 不是“换皮 div”，用错位置或嵌套方式，可访问性、SEO 和 HTML5 大纲会直接出问题。
header 必须是语义容器的直接子元素
浏览器和屏幕阅读器靠父级上下文判断 header 的作用范围：它属于整个页面，还是某篇文章？关键在“谁包着它”。header 只能直接放在 body、article 或 section 里，不能被 div、footer 或其他非语义容器包裹。
- ✅ 正确：
<header><h1>首页</h1></header><main></main> - ✅ 合法：
<article><header><h2>一篇博客</h2></header><p>正文…</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></article> - ❌ 错误：
<div class="wrapper"><header></header></div>（div没语义，header降级为普通容器） - ❌ 错误：
<footer><header></header></footer>（语义冲突，页脚里不该有页眉）
main 必须唯一且只能是 body 的直系子元素
main 是 landmark 角色标识符，不是样式区。W3C 明确规定它只能出现一次，且不能被任何 sectioning content（如 header、nav、footer、article）包裹——否则 Lighthouse 会报 “multiple main landmarks”，NVDA 读屏软件会跳转异常。
- ✅ 正确：
<header></header><nav></nav><main><h1>文章标题</h1> <p>正文…</p></main><footer></footer> - ❌ 错误：
<div><main></main></div>（被div包裹，失去 landmark 身份） - ❌ 错误：
<article><main></main></article>（main不能嵌在article内，语义越界） - ⚠️ 注意：即使页面有多个内容区块（比如新闻列表+详情页），也只应有一个
main，它包裹的是当前视图下用户真正要读的核心内容
footer 表达“结尾信息”，不是底部装饰盒
footer 表示页面或区块的收尾信息，比如版权、作者、发布时间、相关链接。它可以出现在 body 底部，也可以嵌套在 article 或 section 内部——但绝不能用来塞广告、悬浮菜单或与“结尾”无关的内容。
- ✅ 正确：
...<footer><p>© 2026 TechNews</p></footer> - ✅ 合法：
<article><h2>快讯</h2> <p>内容…</p> <footer><time datetime="2026-06-28">6月28日</time></footer></article> - ❌ 错误：
<footer><nav><ul><li>首页</li></ul></nav></footer>（主导航不属于页脚语义范畴） - ❌ 错误：
<footer><div id="ad-banner"></div></footer>（广告不构成“结尾信息”）
真正难的不是写对标签名，而是每次敲下 header、main 或 footer 时，得想清楚：这个区域，到底属于谁？它的作用域是否明确？一旦父容器选错，语义就塌了一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
