HTML中<header>标签与<h1>标签的区别是什么？

1. 语义角色完全不同 #

• <header> 是区块级语义容器，它的作用是包裹页面或某个内容区块的"头部区域"，本身不代表具体的内容层级，只是把头部相关的元素（比如logo、导航、副标题、发布信息等）归为一组。
• <h1> 是标题元素，属于HTML标题层级（h1-h6）里的最高级，用来定义页面或某个内容区块的核心标题，直接体现内容的主次层级关系。

2. 用法场景天差地别 #

• <header> 可以包含多个不同类型的元素，比如：

  <header>
    <img src="blog-logo.png" alt="技术博客Logo">
    <h1>前端技术笔记</h1>
    <nav>
      <a href="/">首页</a>
      <a href="/categories">分类</a>
    </nav>
  </header>
  

  甚至在文章区块里，也能用<header>包裹标题和发布信息：

  <article>
    <header>
      <h1>CSS Flexbox 完全指南</h1>
      <p>作者：张三 | 发布时间：2024-05-20</p>
    </header>
    <p>正文内容...</p>
  </article>
  

• <h1> 则是单独的标题元素，一个页面通常建议只用一个顶级<h1>（对应页面的核心主题），如果是文章或子区块的标题，也可以用<h1>，但要确保和其他标题层级（h2-h6）形成合理的结构，方便搜索引擎和屏幕阅读器识别内容逻辑。

3. 功能优先级不同 #

• <h1> 直接影响内容的可访问性和SEO：屏幕阅读器会优先读取<h1>来告知用户页面的核心主题，搜索引擎也会把<h1>里的内容作为判断页面主题的重要依据。
• <header> 只是起到语义分组的作用，它的价值是让HTML结构更清晰，机器能识别出这是页面/区块的头部区域，但本身不传递内容层级的信息。

一句话总结 #

<h1>是内容的"核心标题"，<header>是头部内容的"容器"，两者经常配合使用，但完全不能互相替代——你不会用<h1>去包裹导航栏，也不会用<header>来单独表示一个标题。

内容的提问来源于stack exchange，提问作者Shweta Nikam