header和footer是语义容器而非视觉标签，必须依附于body、article等明确作用域；禁止嵌套、滥用或仅作样式用途，否则破坏可访问性、seo及结构解析。
header 和 footer 不是“页面顶部/底部”的视觉标签，而是语义容器——用错位置或嵌套关系，会直接破坏结构可读性、影响 SEO 和屏幕阅读器行为。
header 该放在哪？看它服务谁
一个 header 必须依附于明确的内容作用域：要么是整个 body，要么是某个 article、section 或 aside。它不独立存在。
- 全局导航、Logo、搜索框应放在
body直接子级的header中 - 某篇博客文章的标题、作者、发布时间，应包在该
article内部的header里，而不是塞进全局header - 禁止把
header当样式盒子用：比如只为居中一段文字而套一层header，这违反语义，验证器会警告 - 一个区块内最多一个
header；重复出现（如连续两个header套h1）会让辅助技术混淆主次
footer 不能塞进 header，但可以多层共存
footer 和 header 是平级语义单元，彼此不能嵌套——header 里放 footer 是无效 HTML5 结构，浏览器可能降级处理，无障碍工具会跳过或误读。
- 页面级版权信息应作为
body的直接子元素，且通常放在末尾 - 每篇
article可自带footer，比如“标签 | 编辑于 2026-04-18 | 相关推荐”，它和全局footer互不干扰 - 如果某
section下需要补充说明，又不够构成独立article，优先用small或aside，而非硬加footer -
footer不强制出现在视觉底部：CSS 可以把它定位在文章右侧或折叠面板里，语义上它仍是“该区块的补充信息”
什么时候根本不需要 header 或 footer
不是所有带标题或结尾信息的区域都该用 header/footer。关键判断标准是：这块内容是否构成一个有边界的、可被 RSS 抓取或邮件转发的独立单元。
- 纯导航栏（无 Logo、无搜索、仅菜单）更适合用
nav，而不是包在header里 - 轮播图容器、卡片式列表项、分页控件——它们只是 UI 载体，内容本身不可独立分发，用
div更准确 - 单个
h2标题 + 几段描述？直接写h2即可；只有当需要组合h1+p+time+nav表达“这个区块的引导区”时，才用header - 页脚里的友情链接、隐私政策链接，属于全局
footer；但某篇文章末尾的“参考资料”列表，应归入该article的footer
验证与调试时容易忽略的点
浏览器开发者工具里看不出问题，但结构错误会在无障碍检测、SEO 解析和 HTML 验证中暴露。
- 用 W3C Validator 检查时，常见报错：
Element footer must not be a descendant of element header - Chrome 的 Lighthouse “Accessibility” 报告中，若
header缺少h1–h6，会被标记为“缺少主标题” - 用屏幕阅读器测试时，连续多个无上下文的
header会导致“跳转到 header”功能失效或指向错误位置 - 不要依赖 class 名欺骗语义：叫
class="page-header"的div仍不是header元素，机器无法识别
最常被绕过的事实是：header 和 footer 的价值不在视觉，而在它们定义了内容边界。一旦开始混用或滥用，后续加 main、article 或做 SSR 渲染时，结构歧义就会立刻放大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
