html5中正确使用header和footer需遵循语义规则：header应包裹引导性内容（如logo、导航），footer承载补充信息（如版权、备案号）；二者须嵌套在合理上下文中，不可替代body；旧浏览器需声明display:block；多实例允许但顶层通常唯一。
直接用 <header></header> 和 <footer></footer> 标签就是 HTML5 化的正确做法，但光套标签远远不够——语义错误、嵌套失当、CSS 重置遗漏，都会让“HTML5 化”变成假把式。
header 和 footer 必须是语义容器，不是样式占位符
很多人把 <header></header> 当成 <div class="header"> 的替代品，只改标签名不改逻辑。这是最常见误区。
<ul>
<li>
<code><header></header> 应包裹页面或区块的「引导性内容」：如站点 logo、主导航、搜索框；不能只放一个 <h1></h1> 或纯文字
<footer></footer> 应承载「补充性信息」：版权、联系方式、次要链接、备案号；不能塞主菜单或广告横幅<header></header> 和 <footer></footer>（比如每篇 <article></article> 自带独立页眉页脚），但顶层 <header></header> 通常只一个避免 display: block 兼容陷阱
旧版浏览器（IE8 及以下）不认识 <header></header> 等新标签，会默认当成未知元素，display 为 inline，导致布局错乱。现代项目虽已不需兼容 IE8，但若用在内网老旧系统或遗留框架中，仍要留意。
- 显式声明
header, footer { display: block; }是稳妥做法 - 不依赖
html5shiv时，这个 CSS 规则比 JS 补丁更轻量、更可控 - 若用 PostCSS 或构建工具，可通过
postcss-html5-display类插件自动注入
与 main、nav、aside 组合时的层级约束
<header></header> 和 <footer></footer> 不是顶级容器，不能替代 或包裹整个页面结构。它们必须嵌套在有意义的上下文中。
立即学习“前端免费学习笔记（深入）”；
- 典型合法结构：
<body> <header><h1>站点标题</h1><nav>...</nav></header> <main><article>...</article></main> <footer><p>© 2024</p></footer> </body>
- 禁止写法：
<header> <body>...</body> </header>
（是根级元素，不可被任何语义标签包裹） -
<nav></nav>可以出现在<header></header>内，也可独立存在；但<header></header>里放<nav></nav>更符合「导航属于页眉一部分」的语义直觉
真正难的不是写对标签，而是判断某段内容到底算「页眉」还是「副标题区」，或者该归入 <aside></aside> 还是 <footer></footer>。语义边界模糊时，优先看它是否随整个页面复用——全局复用的归 <header>/<footer></footer></header>，局部复用的归对应区块内部的语义标签。
