HTML 标题

标题标签用于定义内容的层级结构。HTML 提供了 6 级标题,<h1><h6>

html
<h1>一级标题(最重要)</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题(最次要)</h6>

层级结构

标题之间应该形成树状层级——<h2><h1> 的子标题,<h3><h2> 的子标题,以此类推:

html
<h1>烹饪指南</h1>
  <h2>中式料理</h2>
    <h3>川菜</h3>
    <h3>粤菜</h3>
  <h2>西式料理</h2>
    <h3>法餐</h3>
    <h3>意餐</h3>

不要为了字体大小而跳级使用标题(如从 <h1> 直接跳到 <h4>)。标题的层级关系对屏幕阅读器搜索引擎至关重要。字号应该用 CSS 调整,而不是选错误的标题级别。

SEO 与可访问性

  • 每个页面应该有且仅有一个 <h1>,它应该是页面的主标题
  • 搜索引擎根据标题层级理解页面结构
  • 屏幕阅读器用户可以按标题跳转浏览内容

最佳实践

  • <h1> 应该与页面 <title> 保持一致或高度相关
  • 标题应该简洁明了,让读者一眼知道接下来是什么内容
  • 不要用标题标签来让文字”变大变粗”——那是 CSS 的工作