当你的标题不知道应该用哪个H的时候怎么办？

H系列标签(H1~H6)是标题标签，在 HTML 语义中具有举足轻重的地位。

如果你要开始练习语义化 HTML 了，我会推荐你先练好如何正确使用标题标签。

为什么 H 标签很重要？

对于所有内容来说，标题都是最重要的部分之一。

标题就是整个内容的第一印象。

所以现在很多教写作的课程，一定会有很大一部分内容在教你怎么定标题。

刚刚提到的标题只是 H1。但其实，H2~H6 也很重要。

通常我们刚开始接触到一本书时，我们的第一反应就是先浏览它的目录。

为什么？因为目录就是一本书的内容大纲，我们从书籍的目录中，就能基本知道这本书的大体内容。

对于网页来说，道理是一样的。所有站点的本质也是提供内容，H 标签就是网页内容的大纲、目录。

就像看书一样，我们通过 H 标签的内容，就可以大概了解这个网页的大体内容和功能。

因此，H 标签对于语义化 HTML 来说，是非常重要的标签。用好 H 标签，也是前端开发的专业基础。

应用 H 标签的问题

在使用 H 标签时，我们常常会碰到一些问题，这也是导致大家放弃应用 H 标签的原因。

标题是个 logo，怎么使用 H1？

很多站点首页都没有在网页中显示这个网页的标题。

往往这个网页的标题是一个 logo，比如淘宝，京东，掘金等等。

给一个图片使用 H1 也很奇怪，而且搜索引擎也无法识别图片呀。

那还怎么使用 H1 呢？

看不出隐藏的标题

很多站点没有明显的标题文字，根本找不到标题呀，那也没法用 H 标签吧。

比如掘金首页，完全看不出来有什么标题吧。

我的组件可能被多个页面引用，应该用哪个 H？

这可能是最多人的疑问。

现在我们的开发都是组件化的，在实现通用组件的时候，我都不知道页面会怎样使用我的组件，那组件的标题应该使用哪个 H 呢？

因为组件有可能在第2层，也有可能在第3层，使用 H2 或者 H3 都觉得不对，索性就不用 H 了吧。

你碰到过这个问题吗？你是不是也这么觉得？

应用 H 标签的几个建议

面对上面几个问题，我们可以这么办。

确保每个网页只有唯一的 H1，你可以隐藏它

建议你记住一个原则，就是保证网页中只有唯一一个 H1，不要重复。

因为在搜索引擎中，H1 是权重非常高的标签，不要有重复的 H1，否则会影响 H1 的权重。

既然 H1 的权重很高，我们就要擅于使用 H1，确保每个网页都要使用 H1，提升网页的 SEO。

针对那些网页内容没有明显展示标题的网页，比如只有 logo 的，我们可以通过 CSS 让 H1 标签隐藏就好了。

这样既可以保证 HTML 包含 H1 标签内容，可以让搜索引擎正确识别，同时也不影响页面展示。

在开发网页时，先确定网页内容

通常，我们建议在开发一个网页时，一定要确定它的页面结构。

我们通过 header，main，footer，nav，section 等 H5 标签来划分页面结构。

除了这个之外，我们还要确定网页的内容模块划分，这样可以让自己更好地理解网页功能。

例如上面的例子，对于掘金首页，我们可以通过页面结构来找到隐藏的网页内容模块，这样，我们的标题目录也出来了。

编写组件时可以这样应用 H 标签

在编写组件，我有 3 个建议。

第 1 个建议，在编写组件时确定要不要用标题标签。不要因为不知道用哪个 H 的烦恼就索性不用标题标签，而是要认真思考，我的组件的标题，在页面中的地位究竟是怎样的，算不算一个比较大的模块？如果是的话，那就应该勇敢地使用 H 标签。

第 2 个建议，当你不知道使用哪个 H 标签时，可以使用 H3。

一般我们的目录最多 4 层，使用 H3 不会导致层级过深。

其次，较多 H3 是可以接受的，因为 H3 已经不算特别重要的标题了。

最后，如果缺少 H2，那 H3 的标题在目录结构中看着也不会特别突兀。

因此，综合考虑，实在不知道使用哪个 H 标签时，使用 H3 标签是比较合适的。

第 3 个建议，建议使用 section 标签来包裹你的组件 HTML 代码。

在 section 标签中，可以相对独立的应用 H 标签。

但仍然避免使用 H1，因为要确保一个网页最多只有一个 H1，所以需要把 H1 留给网页的根文件去添加。

因此，我们可以利用 section 标签来构建我们的组件，然后从 H2 开始去应用标题标签。

这样，别人在看我们的 HTML 代码时，可以结合结构性标签和内容结构标签来快速判断出我们的网页内容。

好了，现在你可以放心大胆地应用 H 标签啦。

----------------【END】----------------

如果你是真心喜欢前端，并相信成长，想要提升自己的话，欢迎加入之道前端学习圈子。

戳这里 免费获取 之道前端的学习资料和专属服务。