在HTML页面开发中，头部区域的合理划分和语义化标签的正确使用，是写出规范代码的基础，很多新手都会困惑HTML头部区域该怎么划分，header标签又该怎么用，下面我们就一步步讲解相关内容。
HTML头部区域的基本概念与划分
HTML的头部区域指的是页面最上方、通常展示网站标识、导航、搜索框等核心信息的区域，划分头部区域的核心是语义优先，而不是单纯靠CSS样式定位。一般来说，头部区域的内容可以分为两类：
- 站点级头部内容：比如整个网站通用的logo、主导航、全站搜索框，这类内容属于整个站点的公共头部，通常放在页面最顶部的header标签中。
- 内容级头部内容：比如某篇文章的标题、作者、发布时间，这类内容属于单篇内容的头部，通常放在对应文章区域的header标签中。
header标签的语义与使用规范
header是HTML5新增的语义化标签，用于表示一组引导性的内容，或者导航链接的容器，它的核心作用是告诉浏览器和搜索引擎，这部分内容是对应区域的头部信息。
header标签的使用场景
header标签可以在一个页面中多次使用，常见场景有以下几个：
- 作为整个页面的头部容器，包裹全站公共头部内容。
- 作为article、section等区块的头部容器，包裹单篇内容或单个区块的标题等信息。
- 作为aside侧边栏的头部容器，包裹侧边栏的标题内容。
header标签的使用限制
header标签不能放在footer、address或者另一个header标签内部，同时如果某个区域只是单纯的样式容器，没有引导性内容或者导航内容，不建议使用header标签，避免语义滥用。
header标签使用示例
下面我们通过两个示例来展示header标签的正确写法，第一个是页面级header的使用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面头部示例</title>
</head>
<body>
<!-- 页面级头部 -->
<header>
<div class="logo">我的个人博客</div>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/archives">归档</a></li>
<li><a href="/about">关于我</a></li>
</ul>
</nav>
<div class="search-box">
<input type="text" placeholder="搜索内容">
<button>搜索</button>
</div>
</header>
<main>
<!-- 页面主体内容 -->
</main>
</body>
</html>第二个是内容级header的使用，放在article标签内部：
<article>
<!-- 内容级头部 -->
<header>
<h1>HTML头部区域划分教程</h1>
<div class="article-meta">
<span>作者：张三</span>
<span>发布时间：2024-05-20</span>
</div>
</header>
<div class="article-content">
<p>本文详细讲解HTML头部区域的划分方法...</p>
</div>
</article>header与其他头部相关标签的区别
很多开发者会混淆header和head标签，两者的区别非常明显：
| 标签 | 作用 | 位置 |
|---|---|---|
| <head> | 存放页面的元数据，比如字符集、标题、引入的CSS和JS等，不会在页面中直接展示 | 位于<html>标签内部，<body>标签之前 |
| <header> | 存放页面或区块的展示型头部内容，会在页面中直接渲染 | 位于<body>标签内部，可多次使用 |
另外，header和h1-h6标题标签也不冲突，header内部可以包含h1到h6的标题标签，标题标签是用来标识内容层级，header是用来标识头部区域，两者可以配合使用。