在网页开发中，我们几乎每天都会与页面的“头部”和“底部”打交道。它们不仅是用户访问时最先看到和最后停留的区域，更是整个网站信息架构的起点与终点。HTML5 专门引入了 <header> 和 <footer> 两个语义化标签，帮助开发者用更清晰、更符合语义的方式构建页面结构。本文将带你系统了解这两个元素的使用方法、常见场景、以及如何在实际项目中用好它们，让你的页面结构既“好看”又“好用”。

一、从“盒子”到“语义”：为什么需要 header 和 footer？

在早期的 HTML 中，我们习惯用 <div> 来搭建页面结构，比如：

<div class="header">...</div>
<div class="footer">...</div>

这种方式虽然可以实现布局，但对搜索引擎、屏幕阅读器以及未来的维护者来说，这些 <div> 并不携带任何“意义”。HTML5 提出的 <header> 和 <footer> 正是为了解决这一问题——它们用标签本身告诉浏览器和开发者：这是一个头部区域，这是一个底部区域。

二、核心定义与功能划分

2.1 <header> 元素

  • 定义：代表页面或某个区块的“引言区”或“导航区”。

  • 特点：通常位于页面或区块的顶部，但不绝对（例如在 <article> 中也可以作为文章头部）。  

  • 内容倾向：Logo、标题、导航、搜索、作者信息等。

2.2 <footer> 元素

  • 定义：代表页面或某个区块的“脚注区”。

  • 特点：通常位于页面或区块的末尾，用于放置补充信息。

  • 内容倾向：版权、联系方式、辅助链接、法律声明等。

关键点：一个页面可以有多个 <header> 和 <footer>，它们的作用域取决于所属的父级元素（如 <body>、<section>、<article>）。

三、使用场景详解

3.1 页面级头部与底部

这是最常见的用法。全局 <header> 包含网站品牌与主导航，全局 <footer> 包含版权与辅助链接。

3.2 区块级头部与底部

在 <section> 或 <article> 内部使用，用于标识该独立区块的标题、元信息或补充内容。  例如，一篇博客文章中，<article> 内部可以有自己的 <header>（标题、作者）和 <footer>（标签、评论链接）。

3.3 特殊场景：不与全局重复

并不是每个区块都必须同时拥有 <header> 和 <footer>，应根据实际内容决定。  如果一个区块只需要标题，用 <hgroup> 或 <h1> 即可，不必为了“语义”强行包裹 <header>。

四、最佳实践与注意事项

4.1 多个 header / footer 的合理使用

  • ✅ 页面级一个，文章级一个，各司其职。

  • ❌ 将 <header> 嵌套在 <footer> 中。

  • ❌ 将 <footer> 作为主要内容容器。

4.2 与相关元素的配合

  • <nav>：通常放在 <header> 中，但也可独立存在于侧边栏。

  • <address>：专用于联系信息，推荐放在 <footer> 中。

  • <h1>~<h6>：<header> 可以包含标题，但不应为了样式而滥用标题层级。

4.3 避免常见误区

  • 误区一：把 <header> 当成“顶部容器”随便用。

→正确做法：只有当容器内包含介绍性内容时才使用。

  • 误区二：在 <footer> 中放大量核心内容。

→正确做法：<footer> 用于补充信息，不应承载主要内容。

  • 误区三：用 <header> 包裹所有顶部内容，不管是否属于同一语义区块。

→正确做法：如果页面顶部有多个独立区块，可考虑拆分结构。

五、代码示例：从简单到复杂

示例 1：基础页面结构
<body>
  <header>
    <h1>网站名称</h1>
    <nav>...</nav>
  </header>

  <main>...</main>

  <footer>
    <p>&copy; 2026 公司名称</p>
  </footer>
</body>
示例 2：文章内部独立头部与底部
<article>
  <header>
    <h2>文章标题</h2>
    <p>作者：神无 | 发布时间：2026-03-30</p>
  </header>

  <p>文章正文内容...</p>

  <footer>
    <p>分类：技术 | 标签：HTML, 语义化</p>
    <address>联系作者：<a href="mailto:shenwu@example.com">shenwu@example.com</a></address>
  </footer>
</article>
示例 3：多区块页面结构
<body>
  <header>全局头部</header>

  <main>
    <section>
      <header>区块1头部（如：最新文章列表标题）</header>
      <ul>...</ul>
      <footer>区块1脚注（如：查看更多）</footer>
    </section>

    <section>
      <header>区块2头部</header>
      <p>...</p>
    </section>
  </main>

  <footer>全局底部</footer>
</body>

六、与 SEO 和无障碍访问的关系

6.1 对 SEO 的意义

  • 搜索引擎会优先识别 <header> 中的导航和标题内容。

  • 合理的 <footer> 内部链接有助于提升全站链接权重分布。

  • 语义化结构比纯 <div> 布局更利于爬虫理解页面层级。

6.2 对无障碍访问的意义

  • 屏幕阅读器（如 NVDA、VoiceOver）会根据语义标签快速跳转区域。

  • 用户可以更高效地定位到头部导航或底部版权信息。

  • 配合 ARIA 标签（如 aria-label）可进一步增强可访问性。

推荐做法：在 <header> 中的导航区域添加 aria-label="主导航"，在 <footer> 中标注 aria-label="页脚信息"，提升辅助设备体验。

七、浏览器兼容性与降级处理

  • 现代浏览器：完全支持。

  • IE9+：支持，但需为这些元素设置 display: block。

  • IE8 及以下：不原生支持，可使用 html5shiv 使其可被样式化

降级示例：
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
<style>
  header, footer, section, article, nav {
    display: block;
  }
</style>

八、进阶思考：header / footer 与布局解耦

在实际工程化项目中，<header> 和 <footer> 往往通过组件化方式管理（如 Vue、React 组件）。此时需注意：

  • 组件内部的语义标签应保持独立，不要因组件复用而破坏语义结构。

  • 在单页应用（SPA）中，全局 <header> 和 <footer> 通常只存在一次，切换页面时仅更新 <main> 内容。

  • 保持标签语义与组件职责一致，避免将 <header> 只作为“样式容器”使用。

总结

<header> 和 <footer> 是 HTML5 语义化体系中最基础也最常用的两个元素。它们看似简单，却在页面结构、用户体验、SEO 和无障碍访问中扮演着重要角色。

用好它们，并不只是“替换 <div> 标签”那么简单，而是需要从内容出发，理解“什么内容适合放在头部”，“什么内容属于补充脚注”。当你能够自然地根据内容选择标签，而非根据“我想让这段文字放上面”来决定时，你对 HTML 的理解就已经迈上了一个新的台阶。

在实际开发中，建议始终遵循以下三条原则：

  1. 语义优先：用标签表达内容含义，而不是为了样式。

  2. 结构清晰：全局与区块区分明确，避免冗余嵌套。

  3. 用户为本：兼顾 SEO 与无障碍，让不同访问方式的人都能获得良好体验。

掌握 <header> 和 <footer>，是构建高质量、可持续网页的重要一步。

彩蛋

本文配有完整示例，点击《现代化布局 | 语义化导航与极致体验》即可查看。