header和footer是作用域绑定的语义单元，必须各自独立嵌套在body、article、section等节元素内，禁止互相嵌套，且每作用域限各一个；单独存在或包裹于div等非节元素中将导致语义失效。
header 和 footer 不是视觉容器，而是作用域绑定的语义单元；组件化不是套标签，而是判断“它服务谁”。
header 必须嵌套在明确节元素下，否则语义失效
单独写 <header></header> 或把它包在 <div class="wrapper"> 里，等于没写——浏览器不报错，但屏幕阅读器只读“header”后跳过，Lighthouse 会标 <code>Missing heading in landmark。
- 全局页眉（logo + 导航）必须是
的直接子元素 - 某篇
<article></article>的标题、作者、时间，必须放在该<article></article>内部的<header></header>中，不能塞进全局<header></header> -
<section></section>下的子章节页眉，标题级要降级：若外层是<article><h1></h1></article>，里面就用<h2></h2>或<h3></h3>，不能硬套<h1></h1> - 轮播图、广告横幅、登录弹窗，哪怕在页面最顶部，也不属于
<header></header>语义，该用<section></section>或<aside></aside>
footer 不等于“页面底部”，而是区块补充信息容器
<footer></footer> 的语义是“本区块的收尾说明”，不是 CSS position: fixed 的锚点。你可以把它定位在卡片右下角、文章末尾，甚至折叠面板里，只要逻辑上归属清晰。
- 页面级版权信息应作为
的直接子元素，且通常放在末尾 -
<article></article>的<footer></footer>可放“标签 | 编辑于 2026-06-20 | 相关推荐”，和全局<footer></footer>互不干扰 -
<section></section>下若需放参考资料或数据来源，可用<footer></footer>；但别塞客服电话、主菜单这类非补充性内容 - 纯装饰性分隔线、背景色块，不属于
<footer></footer>语义，该用<div> + <code>role="contentinfo"header 和 footer 禁止互相嵌套，这是结构硬约束
<header><footer></footer></header>或<footer><header></header></footer>是无效 HTML5 结构。验证器会警告，辅助技术可能跳过内部标签，搜索引擎也可能忽略语义权重。
html-to-pptx-converter下载使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 二者是平级语义单元，只能各自独立嵌套在
、<article></article>、<section></section>等节元素中 - 一个作用域内最多一个
<header></header>和一个<footer></footer>；连续写两个<header></header>会让大纲混乱 - 常见错误：
<div class="site-header"><header></header></div>—— 外层<div> 切断了语义链，<code><header></header>实际被降级为普通容器组件化落地时容易忽略的兼容与验证细节
现代项目虽已不强制兼容 IE8，但在内网系统或遗留框架中，
<header></header>和<footer></footer>仍可能被识别为 inline 元素，导致布局错乱。- 显式声明
header, footer { display: block; }是最轻量稳妥的做法 - 开发者工具看不出嵌套问题，但无障碍检测（如 axe）、SEO 工具（如 Lighthouse）和 W3C 验证器会立刻暴露结构错误
- 不要为“看起来像页眉”而强加
<header></header>：单个<h2></h2>+ 几段描述？直接写<h2></h2>更准确；只有当需要组合<h1></h1>+<time></time>+<nav></nav>表达“这个区块的引导区”时，才用<header></header>
真正难的不是写对标签，而是每次动笔前问一句：这段内容，到底归属于哪个节元素？它是否构成一个可被 RSS 抓取、邮件转发或独立复用的语义单元？
- 显式声明
- 二者是平级语义单元，只能各自独立嵌套在
