<title> 和 <h1> 标签在 HTML 中都与“标题”相关，但它们的作用、位置、用途和对用户及搜索引擎的影响完全不同。理解它们的区别对于网站的可用性、可访问性和 SEO（搜索引擎优化）至关重要。
以下是两者的主要区别：
| 特性 | <title> 标签 | <h1> 标签 |
|---|---|---|
| 位置 | 位于文档的 <head> 部分。 | 位于文档的 <body> 部分，作为页面内容的一部分。 |
| 显示位置 | 不显示在页面内容区域。显示在： 1. 浏览器的标签页（Tab）上。 2. 浏览器的窗口标题栏上。 3. 书签（Bookmark） 的名称。 4. 搜索引擎结果页（SERP） 的链接标题。 | 显示在页面内容区域，是页面可见内容的一部分，通常位于页面顶部，作为主标题。 |
| 主要用途 | 1. 定义网页的元数据（Metadata），是网页的“名字”。 2. 提供页面的全局标识，让用户在多个标签页中快速识别当前页面。 3. SEO 的核心因素，是搜索引擎判断页面主题最重要的依据之一。 | 1. 定义页面内容的主标题或最高层级的章节标题。 2. 建立页面的内容结构和层次（配合 <h2>, <h3> 等）。3. 帮助用户和辅助技术（如屏幕阅读器）快速理解页面的主要主题和组织结构。 |
| 数量 | 每个 HTML 页面有且仅有一个 <title> 标签（最佳实践）。 | 理论上一个页面可以有多个 <h1>，但最佳实践是每个页面一个 <h1>，代表页面的核心主题。 |
| 语义层级 | 不属于页面内容的标题层级结构。它是一个独立的元数据元素。 | 是 HTML 标题层级结构（Heading Hierarchy）的最顶层（<h1> > <h2> > <h3> …）。 |
| 对 SEO 的影响 | 极其重要。是搜索引擎排名算法中权重最高的元素之一。直接影响搜索结果的点击率（CTR）。 | 非常重要。是搜索引擎理解页面内容结构和主题的关键信号。与 <title> 协同工作，强化页面主题。 |
| 对可访问性的影响 | 至关重要。屏幕阅读器用户在打开页面时，首先听到的就是 <title>，这是他们确认自己所在位置的主要方式。 | 非常重要。屏幕阅读器用户可以使用快捷键快速跳转到 <h1>，了解页面主题。标题层级帮助他们导航内容。 |
| 用户可见性 | 所有用户都能看到（在标签页上），无论页面是否滚动。 | 只有当用户在页面上能看到该区域时才可见。如果页面很长，用户滚动后可能看不到 <h1>。 |
使用场景示例
<title> 的典型用法
<head>
<title>苹果 iPhone 15 Pro 官方网站 - 购买与了解</title>
</head>- 作用：当用户打开这个网页时，浏览器标签页上会显示 “苹果 iPhone 15 Pro 官方网站 – 购买与了解”。在 Google 搜索结果中，这个文本会作为链接的标题出现。
<h1> 的典型用法
<body>
<header>
<h1>iPhone 15 Pro</h1>
<p>超强动力。非凡坚固。</p>
</header>
<!-- 页面其他内容... -->
</body>- 作用：在网页的顶部，用户会看到一个大号的 “iPhone 15 Pro” 作为页面的主标题，紧接着是副标题。
关键区别总结
- 元数据 vs 内容：
<title>是关于页面的信息（元数据），本身不是页面内容。<h1>是页面内容本身的一部分。
- 全局标识 vs 内容结构：
<title>告诉用户“我在哪个网页”。<h1>告诉用户“这个网页主要讲什么”。
- 显示位置：
<title>在浏览器界面上。<h1>在网页内容里。
最佳实践
<title>:- 简洁、准确、有吸引力：包含页面的核心关键词。
- 长度适中：通常建议 50-60 个字符，避免在搜索结果中被截断。
- 唯一性：每个页面的
<title>应该是唯一的。 - 品牌化：可以在末尾添加品牌名（如
- 阿里云）。
<h1>:- 一个页面一个
<h1>：清晰地定义页面的主主题。 - 与
<title>相关但不必完全相同：<h1>可以是<title>的核心部分，或者更简洁的版本。两者应保持主题一致。 - 使用标题层级：用
<h2>,<h3>等构建清晰的内容大纲。
- 一个页面一个
总结
简单来说：
<title>是给浏览器、搜索引擎和标签页看的“网页名称”。<h1>是给访问页面内容的用户看的“页面主标题”。
两者协同工作，共同定义了网页的身份和主题，是 SEO 和用户体验的基础。
THE END
