header标签用于标识页面或区块的头部区域，包含标题、导航等介绍性内容。它既可用于整个页面顶部，也可在article或section中多次使用，明确结构层次。正确语义化使用有助于SEO和无障碍访问，避免仅作为样式容器或用div替代。

在HTML中，

标签的语义化使用是为了明确标识一个页面或某个区块的“头部”区域，通常包含介绍性内容或导航链接。正确使用

不仅提升代码可读性，也有利于SEO和无障碍访问。

1.

的基本语义

元素代表一个页面、文章、区域或章节的页眉部分。它不局限于整个页面的顶部，也可以用于内部结构的标题区域。

• 常包含站点标题（h1）、副标题、logo
• 可包含导航菜单（nav）
• 可用于文章开头，比如作者信息、发布时间等

2. 页面级 header 的用法

放在页面最外层的

，一般位于 内部的顶部，作为整个网站的页眉。

<header>
  <h1>我的网站名称</h1>
  <p>网站标语或简介</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/xiazai/skill11769" title="SEO Article Generator"><img
                                                                                src="https://img.php.cn/upload/skill/000/000/081/179393410115105.jpg" alt="SEO Article Generator" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/skill11769" title="SEO Article Generator">SEO Article Generator</a>
                                                                        <p>生成500+词SEO优化文章，采用结构化HTML，含联盟链接，自动更新sitemap，主题涵盖AI工具和数字营销。</p>
                                                                </div>
                                                                <a href="/xiazai/skill11769" title="SEO Article Generator" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于</a></li>
    </ul>
  </nav>
</header>

3. 区块级 header 的语义化使用

不只能用一次。每个

或

都可以有自己的 header。

<article>
  <header>
    <h2>文章标题</h2>
    <p>发表于 2024 年 4 月 5 日 | 作者：张三</p>
  </header>
  <p>这里是文章正文内容……</p>
</article>

这种写法清晰表达了该文章自身的头部信息，符合语义化原则。

4. 常见错误与注意事项

• 不要把
  当作纯粹的样式容器，应关注其语义用途
• 避免在
  内部使用多个 h1（除非有合理的结构划分）
• 不要用
  替代

  ，会丢失语义价值
• 不建议将广告横幅或非介绍性内容作为 header 主体

基本上就这些。合理使用

能让页面结构更清晰，对搜索引擎和屏幕阅读器都更友好。关键是理解它“代表介绍性内容”的本质，而不是仅仅“页面最上面那个部分”。