在HTML5的页面结构定义中，头部区域的定义需要区分两个核心标签：<head>和<header>，二者分别对应不同层级的头部定义，作用和使用场景有本质区别。
head标签的定义与用法
<head>标签是HTML文档的元数据容器，位于<html>标签内部、<body>标签之前，所有内容都不会在浏览器的可视页面中展示，仅用于给浏览器和搜索引擎提供页面相关信息。
它的定义方式是直接作为<html>的子标签存在，内部可以包含多个元数据相关的子标签，常见用法如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 定义字符编码，避免中文乱码 -->
<meta charset="UTF-8">
<!-- 定义页面在浏览器标签页显示的标题 -->
<title>HTML5头部定义示例页面</title>
<!-- 引入外部CSS样式文件 -->
<link rel="stylesheet" href="style.css">
<!-- 引入外部JavaScript脚本 -->
<script src="main.js"></script>
</head>
<body>
<!-- 页面可视内容 -->
</body>
</html>
需要注意的是，<head>标签内部不能放置任何会在页面中渲染的内容，所有可视内容都必须放在<body>标签内。
header标签的定义与用法
<header>标签是HTML5新增的语义化标签，用于定义页面或者区块的头部区域，属于<body>标签内的内容，会在浏览器可视区域展示，通常包含网站的logo、主导航、页面标题、搜索框等内容。
它可以用在多个层级：可以作为整个页面的头部，也可以作为<article>、<section>等区块的头部，常见用法如下：
<body>
<!-- 整个页面的头部区域 -->
<header>
<div class="logo">我的网站</div>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<!-- 文章区块的头部 -->
<article>
<header>
<h1>HTML5头部标签使用教程</h1>
<p>发布时间：2023年10月 | 作者：技术小编</p>
</header>
<p>文章内容正文部分...</p>
</article>
</main>
</body>
两个标签的核心区别对比
为了更清晰地区分二者的差异，我们可以通过下表进行对比：
| 对比维度 | head标签 | header标签 |
|---|---|---|
| 所属区域 | HTML文档元数据区，在body标签外 | 页面可视内容区，在body标签内 |
| 展示性 | 内容不展示在浏览器可视页面 | 内容直接展示在浏览器可视页面 |
| 核心作用 | 存储页面元数据，供浏览器和搜索引擎使用 | 定义页面或区块的头部可视内容，提升语义化 |
| 使用场景 | 每个HTML文档必须有且仅有一个 | 可根据需求在页面或区块中多次使用 |
常见使用误区提醒
很多开发者容易混淆两个标签的使用场景，常见的误区包括：
- 把需要在页面展示的导航、标题内容放在
<head>标签内，导致内容无法显示 - 在
<header>标签内放置元数据内容，比如<meta>标签，不符合语义化规范 - 一个页面定义多个
<head>标签，导致浏览器解析异常
只要明确二者的层级和作用边界，就可以在开发中正确选择对应的标签，让页面结构更规范，也更利于搜索引擎抓取和解析。