网页头部和底部由语义角色定义，非视觉位置决定；页面级须为首个子元素，含标题与主导航，位于后，含版权等元信息；区块级/可多次用于/，各司其职。
网页头部和底部不是靠视觉位置决定的，而是由语义角色定义的。用对 <header></header> 和 <footer></footer>，才能让结构清晰、机器可读、屏幕阅读器能准确定位。
页面级 header：放网站身份与全局入口
整个页面最顶部的 <header></header> 应作为 的首个子元素，包含网站标识性内容：
- 必须有至少一个标题级元素（
<h1></h1>或 logo 图片带 alt） - 主导航
<nav></nav>可嵌套其中，但搜索框、登录按钮若非核心标识功能，建议另置 - 避免塞广告横幅、多语言切换栏——这些不属于“介绍性内容”，应归入其他容器或
<aside></aside> - 不加 class="header" 或 id="top"——标签本身已有语义，无需冗余命名
区块级 header：为 section 或 article 加专属头
<header></header> 可多次使用，每个 <article></article> 或 <section></section> 都可自带 <header></header>，只服务该区块：
- 例如一篇博客文章开头：
<header><h2>如何写好语义化 HTML</h2> <p>作者：李四｜2026-08-20</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></header>
- 一个“产品特性”
<section> 的 <code><header></header>可只含<h2></h2>和简短导语 - 不能嵌套
<header></header>或<footer></footer>——它本身已是顶层语义容器
页面级 footer：版权与联系信息的法定归属地
全站底部的 <footer></footer> 应是 的直接子元素，位于 <main></main> 之后：
- 典型内容包括：© 2026 公司名称、ICP备案号、联系方式、隐私政策链接
- 不要放导航菜单或“回到顶部”按钮——那些属于交互控件，不是底部元信息
- 避免用
<div id="footer"> 替代——失去 ARIA role="contentinfo" 语义 <h3>区块级 footer：给文章或章节加收尾说明</h3> <p>每个 <code><article></article>或<section></section>也可配自己的<footer></footer>，放在区块末尾：- 例如新闻稿结尾：
<footer><p>编辑：王五｜校对：赵六｜来源：内部通稿</p></footer> - 教程章节底部可放“本节要点回顾”或相关资源链接
- 同样不可嵌套，且不承担页面整体底部功能
header 和 footer 是成对出现的逻辑单元，不是上下两个“盒子”。用它们标出“哪里开始介绍”“哪里结束交代”，结构自然立得住。
- 例如新闻稿结尾：
