跳到主要内容

HTML 标题

在 HTML 中，你可以使用标题标签来定义网页内容的层级结构。HTML 提供了 6 个标题标签，从 <h1> 到 <h6>，它们分别代表从最高级别到最低级别的标题。

使用恰当的标题标签不仅能让你的网页结构更清晰，还能提高搜索引擎优化（SEO）效果。现在，让我们一起来了解 HTML 标题的用法吧。

标题标签的层级结构​

HTML 中的标题标签由 <h1> 到 <h6> 组成：

  • <h1> 表示最重要的标题（通常是页面的主标题）
  • <h2> 表示次级标题
  • ...
  • <h6> 表示最不重要的标题（通常是嵌套结构中的小标题）

示例：

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

每个标题默认都有不同的字体大小。浏览器通常会根据标题等级自动设置字体的大小和粗细。

标题应简洁有力​

标题的内容应该简明扼要，突出主题。例如：

<h1>欢迎来到我的个人博客</h1>

尽量不要在标题中写太长的句子或不相关的信息，否则会影响可读性和用户体验。

标题的语义意义​

HTML 标题不仅仅是为了“看起来大一点”。每个标题标签都具有明确的 语义意义（semantic meaning），这对搜索引擎、屏幕阅读器和其他辅助技术都非常重要。

提示

不要仅为了视觉效果使用 <h1> 来让文字变大。如果你只是想让一段普通文本变大，应该用 CSS 设置 font-size，而不是乱用标题标签。

页面应该只包含一个 <h1>​

你应该在每个页面中只使用一个 <h1> 标签，它通常用于页面的主要标题或主题。这有助于：

  • 搜索引擎更好地理解页面结构；
  • 保持语义清晰，便于维护。
<h1>HTML5 教程</h1>
<h2>简介</h2>
<h2>语法基础</h2>

浏览器如何显示标题​

不同的浏览器会为 <h1> 到 <h6> 设置默认样式，例如：

标签默认字体大小
<h1>2em（约 32px）
<h2>1.5em（约 24px）
<h3>1.17em（约 18.7px）
<h4>1em（约 16px）
<h5>0.83em（约 13.3px）
<h6>0.67em（约 10.7px）

这些默认样式可以通过 CSS 自定义，但语义结构最好不要更改。

小结​

HTML 标题是组织网页内容的基础工具，从 <h1> 到 <h6> 分别表示不同层级的标题。你应该合理使用它们来构建清晰的页面结构，并保持语义上的一致性。记住，一个页面通常只包含一个 <h1>，其余的标题用于层级划分和内容组织。掌握标题的使用，有助于你编写出结构合理、易于阅读和维护的 HTML 页面。