header 和 footer 必须作为节元素（如 body、article、section）的直接子元素使用，否则语义失效；全局页眉页脚应置于 body 的首尾直系位置，各节内 header/footer 须一一对应且功能明确，避免嵌套、混用或脱离节结构。
header 和 footer 必须作为节元素的直接子元素
脱离 、<article></article> 或 <section></section> 单独使用 <header></header> 或 <footer></footer>，语义就失效了。浏览器不会报错，但 Lighthouse 会提示 “Missing landmark”、“No heading in header”，屏幕阅读器可能跳过它们。
常见错误写法：
-
<div class="wrapper"><header>...</header></div>—— 外层<div> 切断语义链，<code><header></header>降级为普通容器 -
<header><footer></footer></header>—— 互相嵌套违反 HTML5 结构规范，验证器警告，辅助技术无法正确解析 -
<header></header><div><header></header></div>—— 第二个<header></header>不属于任何节元素，归属模糊
全局页眉页脚要放在 的第一和最后一个直系子元素位置
全站 logo、主导航、版权信息这些“页面级”内容，必须是 的直接子元素，且顺序明确：第一个是 <header></header>，最后一个是 <footer></footer>。
这样做才能被搜索引擎和辅助工具识别为“站点级导航”和“站点级结尾”。其他位置（比如塞进 <main></main> 里）会被视为内容干扰项。
示例结构：
<header><h1>My Site</h1>
<nav><ul><li><a href="/">Home</a></li></ul></nav></header><main><article><header><h2>Post Title</h2></header><p>Content...</p>
<footer><p>Tags: HTML | Published <time datetime="2026-08-01">Aug 1</time></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器"><img
src="https://img.php.cn/upload/skill/000/000/081/179220974213190.jpg" alt="HTML汇报生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="overflowclass">HTML汇报生成器</a>
<p class="overflowclass">🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></footer></article></main><footer><p>© 2026 My Site. All rights reserved.</p></footer>
每个 或 可自带 header/footer，但不能混用功能
<header></header> 是“介绍性内容”，<footer></footer> 是“本区块的补充性结尾内容”，不是视觉定位指令。你可以用 CSS 把它放到卡片右下角，只要逻辑上属于那个父级节元素就行。
容易踩的坑：
-
<footer><nav></nav></footer>—— 主导航不属于“结尾补充”，应移入<nav></nav>或<header></header> -
<footer><div class="ad-banner"></div></footer>—— 广告与“收尾”无关，改用<aside></aside>或普通<div> <li>在 <code><article></article>里写两个<header></header>—— 每个节元素内最多一个<header></header>和一个<footer></footer>，否则大纲混乱 - 起本地服务：用
python3 -m http.server或 VS Code Live Server 启动，.load()才能正常工作 - 构建时注入：Webpack +
html-webpack-plugin，或 Eleventy/Hugo 在打包阶段 inline 内容 - 服务端 includes：Nginx 的
include指令、Apache 的 SSI（<!--#include virtual="header.html" -->） - 避免用
<iframe></iframe>：高度自适应麻烦、焦点管理复杂、无障碍支持弱，仅适合纯静态版权条
复用 header/footer 时别用 jQuery.load() 直接加载外部 HTML
本地双击打开 HTML 文件时，file:// 协议会触发跨域错误：Access to XMLHttpRequest at 'header.html' from origin 'null'。这不是代码写错了，是协议限制。
可行方案：
真正难的不是怎么写标签，而是判断“这个 header 属于谁”——它得锚定在一个明确的节元素上，而不是为了对齐或 padding 硬加一层。语义一旦松动，后续 SEO 和可访问性补救成本远高于初始结构调整。
