header标签用于构建语义化的“引导性内容区域”，应包含标题、logo、导航、搜索框等结构性元素，避免广告、登录入口等内容；适用于页面级和区块级两种层级，需与nav、address等标签协同使用。

用

标签构建网页头部，核心是表达“引导性内容区域”，不是单纯放logo或导航的容器。它必须承载页面或区块的介绍性信息，比如标题、品牌标识、主要导航、搜索框等，且语义上要能被搜索引擎和屏幕阅读器准确识别为“顶部引导区”。

header 标签的正确使用位置

它适用于两个层级：

• 页面级
  ：放在最开头，包裹全站通用的页眉内容，如网站Logo、主导航栏、全局搜索框

  区块级

  ：嵌套在

  、

  内部，表示该内容单元自身的头部，比如一篇博客的标题、作者、发布时间

  里面该放什么，不该放什么

  应包含明确的引导性、结构性元素：

  • ✅ 推荐内容：<h1>网站主标题<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h1>、<img alt="公司logo">、<nav>主导航菜单<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712nav>、<form>搜索框<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712form>
  • ❌ 避免内容：广告横幅、用户登录入口（更适合放在
    内或独立

    ）、整段正文、联系方式（应归入

    或<address>）

    常见结构示例（简洁实用）

    一个典型的企业官网头部写法：<header>
      <h1>启明科技<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h1>
      <nav>
        <ul>
          <li><a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712">首页<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712a><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
          <li><a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712about">关于我们<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712a><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
          <li><a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712services">服务方案<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712a><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
        <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712ul>
      <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712nav>
      <form action="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712search">
        <input type="search" name="q" placeholder="搜索产品或服务">
      <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712form>
    <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712header>

    搭配其他语义标签提升结构清晰度

    很少单独存在，需与周边标签协同形成逻辑闭环：

    • 导航链接集中放在<nav>里，再嵌入
      ——避免把所有<a>直接扔进

      若头部含公司联系信息，用<address>包裹邮箱https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712电话，并放在

      末尾或独立<footer>中

      不要用多个<header>堆砌顶部；同一视觉区域只用一个，内部用语义子标签组织内容