header必须明确归属某个节元素，是其直接子元素且每作用域仅一个；footer同理，表达区块收尾语义而非视觉位置；二者平级，不可嵌套，须含引导性或补充性内容。
header不是“页面顶部的div”，它必须有明确归属
直接写 <header></header> 不等于页面顶部自动出现横幅——它只是告诉浏览器和屏幕阅读器：“这段内容，是某个区块的引导性头部”。关键在于它属于谁：？<article></article>？还是某个 <section></section>？
常见错误现象：<div class="wrapper"><header>...</header></div> —— 这个 <header></header> 实际上被降级为普通容器，语义丢失；<footer><header>...</header></footer> —— 验证器会警告，辅助技术可能跳过内部 <header></header>。
- 全局页眉（如 logo + 主导航）必须是
的直接子元素 - 某篇博客标题、作者、发布时间，应包在该
<article></article>内部的<header></header>中，不能塞进全局<header></header> - 一个作用域内只允许一个
<header></header>；连续写两个（比如<header><h1>...</h1></header><header><nav>...</nav></header>）会让大纲结构混乱 - 里面必须含引导性内容：至少一个标题（
<h1></h1>～<h6></h6>）、<time></time>、作者信息等；纯空<div> 或仅样式类的 <code><header></header>是无效语义footer不是“粘在页面最底下的版权栏”，它表达的是补充性信息
<footer></footer>的语义是“本区块的收尾信息”，不是视觉定位指令。你可以用 CSS 把它放在卡片右下角、文章末尾、甚至折叠面板里，只要逻辑上属于那个区块就行。容易踩的坑：
<footer><nav>...</nav></footer>—— 主导航不属于页脚语义；<footer><div class="ad-banner">...</div></footer>—— 广告位与“结尾补充”无关，应另用<aside></aside>或普通<div>。 <ul> <li>页面级版权信息，应作为 <code>的最后一个直系子元素，且只出现一次 - 每篇
<article></article>可自带<footer></footer>，例如：<footer><p>标签：前端 | 编辑于 <time datetime="2026-06-12">2026-06-12</time></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></footer> -
<section></section>下若需放参考资料或操作按钮，可用<footer></footer>，但避免塞入登录入口、客服电话等非补充性内容 - 禁止
<header></header>包<footer></footer>，也禁止<footer></footer>包<header></header>；二者是平级语义单元，嵌套即失效
嵌套时别靠“看起来像”，而要问“它服务谁”
HTML5 结构验证不看渲染效果，只看父子关系是否符合节元素（、<article></article>、<section></section>、<aside></aside>）的语义边界。多层共存合法，互相嵌套非法。
典型合法结构：<header>...</header><main><article><header>...</header><p>...</p>
<footer>...</footer></article></main><footer>...</footer>
- 每个
<header></header>和<footer></footer>都必须能明确回答：“我属于哪个父级节元素？” -
<main></main>必须是的直系子元素，且全页只能有一个；它不能被<header></header>、<footer></footer>或任何<div> 包裹 <li>如果某块内容既没标题也没独立意义（比如纯装饰性 banner），别硬套 <code><header></header>或<footer></footer>，用<div> 更诚实 <li>动态渲染时，新加载的内容应插入已有 <code><main></main>内部，而不是删掉旧<main></main>再重建一个 - 推荐做法：用
python3 -m http.server或 VS Code 的 Live Server 插件启动 HTTP 服务 - 如果坚持用外部文件，确保
header.html和footer.html里只写纯 HTML 结构，不含<script></script>或相对路径的<link>，否则资源易 404 - 更轻量的替代：用原生
<template></template>+ JS 克隆，或服务端 include（如 PHP 的include 'header.php'），但新手建议先手写再优化 - 记住：
<header></header>和<footer></footer>本身不需要任何 JS 支持，写进去就生效，不依赖加载逻辑
本地开发时别用 load() 引入 header.html/footer.html
双击打开 index.html 时，浏览器走的是 file:// 协议，jQuery.load() 或 fetch() 会因跨域被拦截，控制台报错：Access to XMLHttpRequest at 'header.html' from origin 'null' has been blocked。
这不是代码写错了，是协议限制。想让外部 HTML 片段生效，必须起本地服务。
<header></header> 前，得停半秒想清楚：这个头部，到底属于谁？
