header和footer是作用域绑定的语义单元，必须各自独立嵌套在body、article、section等节元素内，禁止互相嵌套，且每作用域限各一个；单独存在或包裹于div等非节元素中将导致语义失效。

header 和 footer 不是视觉容器，而是作用域绑定的语义单元；组件化不是套标签，而是判断“它服务谁”。

header 必须嵌套在明确节元素下，否则语义失效

单独写 <header></header> 或把它包在 <div class="wrapper"> 里，等于没写——浏览器不报错，但屏幕阅读器只读“header”后跳过，Lighthouse 会标 Missing heading in landmark。

• 全局页眉（logo + 导航）必须是 <body> 的直接子元素
• 某篇 <article> 的标题、作者、时间，必须放在该 <article> 内部的 <header> 中，不能塞进全局 <header>
• <section> 下的子章节页眉，标题级要降级：若外层是 <article><h1>，里面就用 <h2> 或 <h3>，不能硬套 <h1>
• 轮播图、广告横幅、登录弹窗，哪怕在页面最顶部，也不属于 <header> 语义，该用 <section> 或 <aside>

footer 不等于“页面底部”，而是区块补充信息容器

<footer> 的语义是“本区块的收尾说明”，不是 CSS position: fixed 的锚点。你可以把它定位在卡片右下角、文章末尾，甚至折叠面板里，只要逻辑上归属清晰。

• 页面级版权信息应作为 <body> 的直接子元素，且通常放在末尾
• <article> 的 <footer> 可放“标签 | 编辑于 2026-06-20 | 相关推荐”，和全局 <footer> 互不干扰
• <section> 下若需放参考资料或数据来源，可用 <footer>；但别塞客服电话、主菜单这类非补充性内容
• 纯装饰性分隔线、背景色块，不属于 <footer> 语义，该用 <div> + role="contentinfo"

header 和 footer 禁止互相嵌套，这是结构硬约束

<header><footer></footer></header> 或 <footer><header></header></footer> 是无效 HTML5 结构。验证器会警告，辅助技术可能跳过内部标签，搜索引擎也可能忽略语义权重。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

立即学习“前端免费学习笔记（深入）”；

• 二者是平级语义单元，只能各自独立嵌套在 <body>、<article>、<section> 等节元素中
• 一个作用域内最多一个 <header> 和一个 <footer>；连续写两个 <header> 会让大纲混乱
• 常见错误：<div class="site-header"><header></header></div> —— 外层 <div> 切断了语义链，<header> 实际被降级为普通容器

组件化落地时容易忽略的兼容与验证细节

现代项目虽已不强制兼容 IE8，但在内网系统或遗留框架中，<header> 和 <footer> 仍可能被识别为 inline 元素，导致布局错乱。

• 显式声明 header, footer { display: block; } 是最轻量稳妥的做法
• 开发者工具看不出嵌套问题，但无障碍检测（如 axe）、SEO 工具（如 Lighthouse）和 W3C 验证器会立刻暴露结构错误
• 不要为“看起来像页眉”而强加 <header>：单个 <h2> + 几段描述？直接写 <h2> 更准确；只有当需要组合 <h1> + <time> + <nav> 表达“这个区块的引导区”时，才用 <header>

真正难的不是写对标签，而是每次动笔前问一句：这段内容，到底归属于哪个节元素？它是否构成一个可被 RSS 抓取、邮件转发或独立复用的语义单元？