网站h1,h2,h3标签的用法和技巧

jayzou 发布于2019-08-01 14:42 / 3307人阅读

摘要：网站标签的用法和技巧我们首先要明白是什么。所以按照标签的级别，我们理所应当的应该把标签用在网站最核心的内容上。最好是在网页源代码的标签一开始的第一个容器中第一行出现。首页及内页的栏目标题均使用标签。

网站h1,h2,h3标签的用法和技巧

我们首先要明白h1,h2是什么。在HTML语言中有

到

定义标题头的六个不同文字大小的TAGES。本质是为了呈现内容结构，共有六种标签，文字从大到小，权重依此反而降低。也就是说H1>H2>H3，依此类推。他在优化中也是起着，呈现内容结构的一个作用，这样分配的好处把网页整个结构由主到次区分开来，搜索引擎抓取网页的时候就会按着这样的顺序进行抓取索引。

h1,h2标签可以在任何地方使用，任何你觉得可以凸显网页内容主次的地方进行使用。举个例子，网站的首页。通常来说网站的首页最主要的地方就是网站的名称，因为网站的主题是围绕网站名称来进行建造的。所以按照标签的级别，我们理所应当的应该把H1标签用在网站最核心的内容上。当然也有例外，比如说网站是一个门户站，例如网站名称是新浪。但我们思路仍然可以套用，把H1定义在最核心的内容上。

首页的核心内容已经固定，就剩下导航栏目，还有一些其他调用的栏目了。网站导航栏目有很多连接指向他，并且是长期固定不变的，必然权重不会低，所以我们可以把这个H2标签的机会用在那些不是导航，又在首页调用的栏目上。然后就是H3，我们稍加安排就好。

首先我要知道，什么是heading标签？

w3school的相关文字：

-
标签可定义标题。
定义最大的标题。
定义最小的标题。

由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

注：heading标签均为块级元素（block）

为什么要使用heading标签？

我们所使用到的标签，都应该是有含义的：比如ul是无序列表，适合做新闻列表；ol是有序列表，适合做排行版；del是删除线，适合用来放
b2c的“原价”；address里放的是地址；blockquote大段引用。其它义语标签的用法，在这里暂不一一列举，等等这些，为得是能让搜索引擎知道，这些内容到底是什么意思，也算是比较浅显的所谓人机交互。

h1，h2，h3 的用法：

h1 — 大标题，放置于首页顶部区域，通常即导航以上的部分，全站通用，用来诠释整个网站的内容，应包含网站主关键字，但切忌不要进行关键字堆砌。最好是在网页源代码的body标签一开始的第一个容器中第一行出现。且保证一个页面中只出现一次或者零次。

h2 — 副标题，每个页面出现的次数以1-3次为宜。

首页：同h1，放置于主头部区域，于h1的下方，全站调用，同样用于概括整站的内容。或者在头部通用区域的下方，首页内容的开头或者中间部分使用一次，用于诠释首页的内容。

子频道页：无论顶部区域是否出现过一次h2，可结合实际情况在头部通用区域的下方，页面内容的开头部分使用一次，用于诠释频道页面的内容。

（以上2种方法可以任选其一，也可以同时并存）

文章/产品内页：文章的标题使用h2标签。

按以上方法，h2标签最多会被使用到3次，但是请少使用1次。据以往经验来看，文章/产品内页使用h2标签效果显著。

h3 — 三级标题，h3的使用次数，没有明确的规定，大家用到该用的地方就行。
首页及内页的栏目标题均使用h3标签。刚才说道h2适用于文章内页的文章标题上，那么h3我通常也用到文章的分段标题上

本文基本内容来自：http://panyanfeng.com/website-h1-h2-h3-tag-usage-and-skills/

GPU云服务器云服务器云服务器1H2G和1H1G的区别 html的h1 html里h1的属性购买1h1g的服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49541.html

每日 30 秒 ⏱ H1 の小秘密

showImg(https://segmentfault.com/img/remote/1460000018747727?w=900&h=500); 简介 heading 标签、SEO、无障碍阅读 ps: 内容有点多，本来只想讲一个点，但是关联性太强了，所以辛苦大家了。在学习 HTML 标签的时候，很多教程只告诉你怎么用而没有讲清楚是什么，让我们一起从 h1 到 h6 开始重新认识 HTM...

blastz 2019-08-23 16:42 评论0 收藏0
CSS基础篇--css reset重置样式有那么重要吗？

摘要：在以前写代码的时候，一般都会在里添加重置样式，其内容如下但是最近在网上看了看网络文章，也感觉有些重置是没有用的。当然重置的优点，缺点都不说了，估计心里都非常有数的，还是要根据实际项目来。后来主管给我推荐了一款替代重置的替代方案，那就是用。在以前写html代码的时候，一般都会在head里添加重置样式reset.css，其内容如下： @charset utf-8; html, body,...

rockswang 2019-08-28 18:16 评论0 收藏0
css写作建议和性能优化小结

摘要：前言还有几天就到国庆中秋了，快要放假了，先祝大家节日快乐之前写过的写作建议和技巧，那么今天就来聊聊吧说到，每一个网页都离不开，但是对于，很多开发者的想法就是，只要能用来布局，把效果图排出来就可以了，其它的细节或者优化，不需要怎么考虑。 1.前言还有几天就到国庆中秋了，快要放假了，先祝大家节日快乐！之前写过js的写作建议和技巧，那么今天就来聊聊css吧！说到css，每一个网页都离不开c...

lifesimple 2019-08-01 17:41 评论0 收藏0
css写作建议和性能优化小结

摘要：前言还有几天就到国庆中秋了，快要放假了，先祝大家节日快乐之前写过的写作建议和技巧，那么今天就来聊聊吧说到，每一个网页都离不开，但是对于，很多开发者的想法就是，只要能用来布局，把效果图排出来就可以了，其它的细节或者优化，不需要怎么考虑。 1.前言还有几天就到国庆中秋了，快要放假了，先祝大家节日快乐！之前写过js的写作建议和技巧，那么今天就来聊聊css吧！说到css，每一个网页都离不开c...

hiYoHoo 2019-08-30 15:53 评论0 收藏0
独立开发变现周刊（第 18 期）：一个通过短信进行购物的网站平台

摘要：不均匀的元素会感觉很奇怪即使它们之间的间距是一样的，视觉效果似乎是不一致的一个超级快速的解决方法是为所有元素设置相同的宽度。从图片里提取色盘的开源库是一个开源库，有端和端的模块可用。 .markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;c...

fevin 2021-09-04 16:40 评论0 收藏0