<header>和<footer>必须作为<body>、<article>、<section>等节元素的直接子元素，禁止互相嵌套或脱离节上下文使用，否则语义失效、影响可访问性与SEO。
header 和 footer 必须嵌套在节元素内，否则语义失效
单独写 <header></header> 或包在 <div class="wrapper"></div> 里，浏览器不会报错，但 Lighthouse 会标 “Missing heading in landmark”，屏幕阅读器可能跳过整个区块。语义不是靠标签名生效的，而是靠它在 DOM 树中的位置。
关键规则：<header> 和 <footer> 必须是 <body>、<article>、<section> 等节元素（sectioning content）的直接子元素。它们不是视觉容器，而是作用域绑定单元。
-
<body>下可有一个全局<header>（含 logo + 主导航），也必须有一个全局<footer>（如版权信息），且都应为<body>的直系子元素 - 每个
<article>内可有自己的<header>（含标题、作者、<time>），也允许配一个<footer>（如标签、编辑时间） -
<div>不是节元素，所以<div><header></header></div>中的<header>实际被降级为普通容器，语义丢失
header 和 footer 禁止互相嵌套，这是结构硬约束
<header><footer></footer></header> 或 <footer><header></header></footer> 是无效 HTML5 结构。验证器会警告，辅助技术可能忽略内部标签，搜索引擎也可能弱化语义权重。
二者是平级语义单元，只能各自独立存在——你可以有多个 <header> 和多个 <footer>，但必须分别挂靠在不同节元素下，不能形成父子关系。
立即学习“前端免费学习笔记（深入）”；
- 全局页眉（
<body>下的<header>）里塞一个<footer>做“小版权栏”？不行，语义冲突 - 卡片组件右下角放作者信息？用
<section><footer></footer></section>，而不是把<footer>塞进卡片的<header> - 轮播图顶部加 logo？若它不属于任何节元素上下文，就该用
<div role="banner">，而非滥用<header>
一个作用域内只允许一个 header 和一个 footer
连续写两个 <header>，比如一个放 <h1>，另一个放 <nav>，会让大纲结构混乱。辅助技术无法判断哪个是主头部，SEO 权重也会分散。
正确做法是把引导性内容聚合在一个 <header> 内：标题、副标题、作者、时间、主导航均可共存，只要逻辑上服务于同一作用域。
-
<article>的<header>应包含至少一个标题（<h1>～<h6>）或<time>等引导性内容；纯空<header></header>是无效语义 -
<section>下的子章节如果需要页眉，标题级要降级（外层<h1>，内部用<h2>），不能硬套<h1> - 广告横幅、登录入口、客服电话都不属于
<footer>语义，哪怕放在页面最底部，也该用<div>或<aside>
兼容性与验证细节常被忽略
现代浏览器对 <header> 和 <footer> 支持良好，但在某些内网系统或遗留框架中（尤其仍需兼容 IE8 的场景），它们可能被识别为 inline 元素，导致布局错乱。这不是 bug，而是历史遗留渲染差异。
HTML5 验证不看 CSS 渲染效果，只检查父子关系是否符合节元素规范。一个看似“排版正确”的页面，DOM 结构错误照样会被标记为语义缺陷。
- 用 W3C Validator 检查时，重点看 “Element header not allowed as child of element div” 这类提示，而非样式是否对齐
-
<footer>不等于 “粘在页面最底下的版权栏”，它可以定位在卡片右下角、折叠面板末尾，只要逻辑归属清晰 - 纯装饰性分隔线、背景色块不属于
<footer>语义，该用<div>+role="contentinfo"替代
<header> 或 <footer> 前，先问一句：“它服务谁？” —— 答案必须是一个明确的节元素，而不是“看起来应该放这里”。 
