HTML5 header和footer_HTML5页眉页脚标签使用规范

header和footer标签用于定义网页或区块的头部和尾部，提升语义化、可访问性与SEO；header通常包含标题、导航等介绍性内容，可多次使用于不同区块，建议包含h1-h6标题，避免仅作样式容器；footer常用于版权信息、联系方式、辅助链接等，同样支持页面级与局部使用，不应仅为视觉布局而滥用；两者需结合nav、main等语义标签构建清晰结构，正确使用有助于搜索引擎和屏幕阅读器理解页面。

在HTML5中，header 和 footer 标签用于定义页面或区块的页眉和页脚区域，它们增强了网页的语义化结构，有助于提升可访问性和SEO效果。正确使用这两个标签，能让代码更清晰、更易维护。

header 标签的使用规范

header 标签表示一个页面或区块的头部内容，通常包含标题、作者信息、导航链接或搜索框等介绍性内容。

• 可以出现在页面的主体部分，也可以用于 article 或 section 内部，作为局部区块的页眉
• 一个页面可以有多个 header，但每个应服务于不同的语义区域
• 建议包含至少一个标题元素（h1–h6），但不是强制要求
• 避免将 header 用作纯粹的样式容器，应注重其语义用途

示例：

<header>
<h1>网站标题</h1>
<nav><a href="https://www.php.cn/home">首页</a></nav>
</header>

footer 标签的使用规范

footer 标签定义一个页面或区块的底部信息，常用于放置版权信息、联系方式、相关链接或隐私政策等。

立即学习“前端免费学习笔记（深入）”；

• 与 header 类似，footer 可以存在于页面级，也可嵌套在 article、section 等元素内部
• 页面中可以有多个 footer，例如主页面一个，每篇文章一个
• 通常包含版权说明、备案号、返回顶部链接或辅助导航
• 不应仅用于视觉上的“底部样式”，而应体现其语义意义

示例：

<footer>
<p>© 2025 公司名称. 版权所有.</p>
<a href="https://www.php.cn/contact">联系我们</a>
</footer>

常见使用场景与注意事项

• header 和 footer 不一定非要位于页面最顶端或最底端，关键在于语义位置
• 不要滥用：若某区域没有明确的头部或尾部语义，应使用 div 或其他通用标签
• 配合 nav、main、aside 等语义标签使用，构建完整的文档结构
• 搜索引擎和屏幕阅读器依赖这些标签理解页面布局，合理使用可提升无障碍体验

基本上就这些。掌握 header 和 footer 的语义本质，比单纯追求标签使用更重要。