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