头部标签 - <header>

什么是 <header> 标签？

<header> 是HTML5引入的语义化标签，用于定义文档或节的头部区域。通常包含导航链接、标题、logo、搜索框等内容。它可以在一个文档中使用多次，分别表示不同内容块的头部。

基本语法

<header>
  <!-- 头部内容 -->
</header>

典型用法

页面级头部

<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系方式</a></li>
    </ul>
  </nav>
</header>

内容块头部

<article>
  <header>
    <h2>文章标题</h2>
    <p>发布日期：2026-02-06</p>
  </header>
  <!-- 文章内容 -->
</article>

全局属性

<header> 标签支持所有HTML全局属性：

最佳实践

1. 语义化使用：仅将 <header> 用于表示内容的头部区域，而不是所有顶部位置的容器

2. 避免嵌套：不要在 <header> 内部嵌套另一个 <header> 元素

3. 包含相关内容：在 <header> 中只包含与头部相关的内容，如导航、标题等

4. 结合其他语义标签：与 <nav>、<h1>-<h6> 等标签配合使用，增强页面的语义结构

浏览器兼容性

• Chrome 5+
• Firefox 4+
• Safari 5+
• Opera 11.1+
• IE 9+

总结

<header> 标签是HTML5语义化标签的重要组成部分，它提供了清晰的页面结构信息，有助于：

• 提高代码的可读性和可维护性
• 增强搜索引擎优化（SEO）
• 改善无障碍访问性
• 更好地支持未来的浏览器功能