标题标签（包括h1到h6）有很高的使用率，它们用于描述内容的主题。在屏幕阅读器中，用户为更快地了解页面内容，可以设置让阅读器只朗读页面标题。这意味着标题标签之间以及标签本身都应语义化，不应仅仅为了获得不同字号而使用不同级别的标题标签。

语义化：标签名能准确地表达它所含内容的信息类型。

对于一篇含有引言、正文、结论的论文，把结论作为引言的一部分没有任何意义，因为结论应该是独立的章节。类似地，页面中的标题标签也应该是有序的，并且能表明内容的层次关系。

在使用中，相同级别（或者更高级别）的标题标签用于开启新的章节，低一级别的标题标签用于开启上一级标题标签的子小节。

举个例子：一个h2标签后紧跟若干h4标签的页面，会让使用屏幕阅读器的用户感到困惑。尽管在页面中，使用这 6
个标题标签可以控制内容的的视觉样式，但我们应该使用 CSS 来调整。

最后一点，每个页面应该只有一个h1标签，用来说明页面主要内容。h1标签和其他的标题标签可以让搜索引擎获取页面的大纲。

<h1>-<h5>标签层级示例：

<h1>2019年5月活动策划方案</h1> //每个页面应该只有一个h1标签；

<h2>1 活动流程</h2> //作为“h1”标签下的独立段落标题

<h3>1.1 签到</h3> // 作为“h2”标签下的独立段落标题

<h4>1.1.1 签名</h4> //作为“h3”标签下的独立段落标题

<h5>1.1.1.1 发放签名笔 </h5> //作为“h4”标签下的独立段落标题

<p>请引导本地嘉宾使用黑色碳素笔，引导外地嘉宾使用红色标记笔。</p>//段落内容

<h5>1.1.1.2 指引签名处 </h5>
<p>请引导嘉宾签名，保证嘉宾至少预留一种联系方式。</p>
<h5>1.1.1.3 签名笔回收 </h5>
<h5>1.1.1.4 发放工作证 </h5>

<h4>1.1.2 引导入座</h4>
<h5>1.1.2.1 检查工作证佩戴 </h5>
<h5>1.1.2.2 确认嘉宾身份 </h5>
<h5>1.1.2.3 引导入座 </h5>

<h3>1.2 嘉宾流程</h3>

<h4>1.2.1 讲解流程</h4>
<h5>1.2.1.1 介绍活动流程 </h5>
<h5>1.2.1.2 嘉宾大概上台时间 </h5>
<h5>1.2.1.3 活动注意事项说明 </h5>

<h4>1.2.2 嘉宾上台流程</h4>
<h5>1.2.2.1 上台提示 </h5>
<h5>1.2.2.2 嘉宾演讲时间确认 </h5>
<h5>1.2.2.3 嘉宾演讲完毕述求确认 </h5>
<h5>1.2.2.4 下台及述求引导 </h5>

<h1>-<h5>标签效果：

2019年5月活动策划方案

*//每个页面应该只有一个h1标签；*

1 活动流程

*//作为“h1”标签下的独立段落标题*

1.1 签到

*// 作为“h2”标签下的独立段落标题*

1.1.1 签名

*//作为“h3”标签下的独立段落标题*

1.1.1.1 发放签名笔

*//作为“h4”标签下的独立段落标题*

请引导本地嘉宾使用黑色碳素笔，引导外地嘉宾使用红色标记笔。

*//段落内容*

1.1.1.2 指引签名处

请引导嘉宾签名，保证嘉宾至少预留一种联系方式。

1.1.1.3 签名笔回收

1.1.1.4 发放工作证

1.1.2 引导入座

1.1.2.1 检查工作证佩戴

1.1.2.2 确认嘉宾身份

1.1.2.3 引导入座

1.2 嘉宾流程

1.2.1 讲解流程

1.2.1.1 介绍活动流程

1.2.1.2 嘉宾大概上台时间

1.2.1.3 活动注意事项说明

1.2.2 嘉宾上台流程

1.2.2.1 上台提示

1.2.2.2 嘉宾演讲时间确认

1.2.2.3 嘉宾演讲完毕述求确认

1.2.2.4 下台及述求引导

<h1>-<h6>标签层级图示：
标签h1-h6思维导图示例
<h6>标签：预留章节！

web前端：使用"h1"-"h6"标签让页面内容层次鲜明