HTML标题标签： <h1>，<h2>，<h3>，<h4>，<h5>，<h6> 标题(Heading)元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。
HTML标题标签从<h1>至<h6>演示
See the Pen html-demo-h1-h6 by Peter (@linyongmin) on CodePen.default
HTML标题元素属性
HTML标题标签包含所有HTML元素共有的属性，可以用于所有HTML标题元素，即使属性可能对某些元素不起作用。
使用要点
- 用户代理可以使用标题信息，例如自动构建文档的目录；
- 不要为了减小标题的字体大小而使用低级别标题，而应该使用CSS font-size属性；
- 避免跳过某级标题：始终要从<h1>开始，接下来依次使用 <h2> 等等；
- 使用<section>元素时，避免在同一个页面上重复使用<h1>，<h1>应该用于页面标题，其它标题应从<h2>开始，在使用section时，应当每个section都使用一个。
所有标题代码样例
下面的代码展示了所有可用的标题级别：
See the Pen html-all-headings by Peter (@linyongmin) on CodePen.default
<section>代码样例
See the Pen html-section-headings by Peter (@linyongmin) on CodePen.default
HTML标题标签的作用
六个html标题标签是HTML内容编写的重要组成部分，除了可以满足一些明显的需求，还可以将重要的事情写在标题上，标题标签还有SEO价值，标题标签可以帮助你写作更有条理，并使页面更加友好。
标题标签和搜索引擎优化
搜索引擎试图弄清楚你的网页：
- 这是关于什么的内容？
- 内容质量如何？
通常链接到这个页面是衡量这个页面内容质量如何？对网页的分析是用于确定该页面的内容。（当然这里有一些重叠之处Google通过分析网页对内容质量做出一些判断，并且还通过查看这个网页外链试图弄清网页的内容。） Google和其它搜索引擎确定页面内容其中一个方法就是查看标题标记中出现的关键字。这就是为什么要为特定关键字或短语做搜索排名，将这些关键字和短语放置在标题标签中真正的意图。
标题标签让文章更有条理
当人们不使用标题标签的情况下进行书写时（例如，手写或像MS Word这样可视化编辑器中进行书写）时，通常是长时间书写不间断的连续文本。 更糟糕的是，他们可能会添加视觉标题（带有粗体，全部大写，较大的字体或其它内容）。这很常见，因为人们本能知道要将文章分段。
标题标签让内容层次结构清晰
在单个内容的页面上，该内容的主要标题应该使用h1标签，内容中的主要部分应以h2为标题，内容中的小节应以h3开头，依此类推。这种结构使写作更加有条理，也使写作变得更好。
专业建议：许多在线作家首先撰写好文章大小标题，然后填写标题下面各个部分的内容，这肯定可以加快文章编写速度，并且文章最终效果通常比刚开始拟写的大纲有所发展并且要连贯得多。
标题对读者有益
浏览是阅读在线文章的一个小秘密。几乎没有人会阅读在线文章的每个字词。 您当然不能阻止它。 但你可以做到这一点，使浏览用户的眼睛向下移动略读页面的标题，相关内容回到文章的正文中。还可以将文章分解为小段，这样一来不会因为文章内容长时间没有另起一段而使读者感到焦虑。
不要忘记链接
从HTML5开始，我们可以通过添加一个井号（＃）和该元素的ID链接到页面上的任何元素（过去我们只能链接到锚点元素）。通过向页面上的每个标题添加ID，我们可以链接到文档中的任何位置。（请参阅页面顶部的“内容目录”如何工作）这些文档内链接可能非常有用，尤其是任何形式的参考内容或文章特别长的情况下。
使用标题标签组织内容
一般来说，有两种类型的内容页面：单个内容页面（表示单个内容）和索引页面（列出一堆内容）。 索引页面包括站点的主要博客页面，类别和标签档案，列出由作者撰写的所有文章的作者页面，等等。 然后还有几乎在每个页面上显示的内容（边栏，小部件，页脚），而这些内容并不是真正的“内容”。在这种情况下，如何使用标题标签影响SEO和实用性。
<h1>和<h2>元素
在网站单个内容网页标题应该始终位于<body>正文顶部附近的<h1>标签中，在文章段落部分建议使用<h2>标签作为副标题，如下代码演示：
See the Pen html-headings-tag-structure-content by Peter (@linyongmin) on CodePen.default
在实践中，我们通常可以将网站标题放在<h1>标签中，例如类别名称，作者名称， 定义该页的任何名称。然后把网站各部分内容用 <h2> 标签作为副标题，如下代码演示：
See the Pen html-heading-seo-practices by Peter (@linyongmin) on CodePen.default
标题标签嵌套使用方法
标题可以嵌套为小节组织页面内容，大多数屏幕阅读器还可以生成页面上所有标题的有序列表，可以帮助人们快速确定内容的层次结构：
h1甲虫h2词源h2分布与多样性h2进化历程h3晚古生代h3侏罗纪h3白垩纪h3新生代
h2外部形态h3头h4口器
h3胸部h4前胸h4翼龙
h3腿部h3翅膀h3腹部
直到现在侧边栏中使用<h3>或<h4>标签作为小部件标题也很常见。许多内容管理系统自动地这样做。但如果你从头开始设计整个页面HTML标签的时候，则可能需要考虑这个问题。当然将侧边栏放在<aside>标签可以避免这种情况。
转载请注明：林雍岷 » 5. 正确使用<h1>至<h6>HTML标题标签