HTML <h1> 到 <h6> 标签

HTML <h1>–<h6> 标题(Heading)元素呈现了六个不同的级别的标题,<h1> 级别最高,而 <h6> 级别最低。用好heading 标签不仅让你的页面层级结构明显,便于用户阅读,同时在SEO方面,也更能利于搜索引擎从而提高排名。


实例

六个不同的 HTML 标题:

  1. <html>
  2. <body>
  3. <h1>这是 h1 标题</h1>
  4. <h2>这是 h2 标题</h2>
  5. <h3>这是 h3 标题</h3>
  6. <h4>这是 h4 标题</h4>
  7. <h5>这是 h5 标题</h5>
  8. <h6>这是 h6 标题</h6>
  9. <p>请仅仅把标题标签用于标题文本。如果只是为了实现粗体样式,请使用其它标签或 CSS 代替。</p>
  10. </body>
  11. </html>

浏览器支持

元素
<h1>-<h6>YesYesYesYesYes

所有浏览器都支持 <h1> - <h6> 标签。


定义和用法

  • <h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

  • 用户代理可以使用标题信息自动构造文档的目录。

  • 避免使用标题元素调整文本大小。相反,请使用CSS font-size属性。

  • 避免跳过标题级别:总是从<h1>开始,然后是<h2>等等。

  • 每页或视图只能使用一个<h1>。它应该简明地描述内容的总体目的。

  • 使用多个<h1>不会导致错误,但不视为最佳做法。只使用一个<h1>对屏幕阅读器用户和SEO都是有益的。

  • 虽然HTML5允许每个分区元素都有一个<h1>,但这并不是最佳实践,可能会颠覆屏幕阅读器用户导航方式的预期。


注意事项

1、对于屏幕阅读软件的用户来说,一种常见的导航方法是从一个标题跳到另一个标题以快速确定页面的内容。因此,重要的是不要跳过一个或多个标题级别。这样做可能会造成混乱,因为这样导航会让人不明白重点所在。

例如不建议以下方式

  1. <h1>h1 标题</h1>
  2. <h3>h3 标题</h3>
  3. <h6>h6 标题</h6>

建议的使用方式:

  1. <h1>h1 标题</h1>
  2. <h2>h2 标题</h2>
  3. <h3>h3 标题</h3>

2、标题可以嵌套为子部分,以反映页面内容的组织。大多数屏幕阅读器还可以生成页面上所有标题的有序列表,这可以帮助用户快速确定内容的层次结构。


HTML 与 XHTML 之间的差异

在 HTML 4.01 中,h1 - h6 元素的 "align" 属性不被推荐使用。在 XHTML 1.0 Strict DTD 中,h1 - h6 元素的 "align" 属性不被支持。


可选的属性

属性描述
align
  • left
  • center
  • right
  • justify

不推荐使用。请使用样式替代它。

规定标题中文本的排列。


标准属性

  1. id, class, title, style, dir, lang, xml:lang

如需完整的描述,请访问标准属性。


事件属性

  1. onclick, ondblclick, onmousedown, onmouseup, onmouseover,
  2. onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

如需完整的描述,请访问事件属性。