![技术小学生微信公众号 技术小学生微信公众号](/d/file/p/2023/11-06/384a0f88dc69e6f0b9276fec739fb818.png)
![腾讯云服务器大促销。](/d/file/p/2023/06-06/8f2af9e8846e4a93cc2a3890462510dc.png)
![华为服务器](/d/file/p/2023/07-25/08518ffe66f6cea5a59993d8b8d33b96.jpg)
学会合理的使用heading标签应该算做是使用符合w3c的义语Xhtml进行页面构架的第一步。今天正好就朋友问起我h1标签的用法,那么我来说说我的习惯。
首先我要知道,什么是heading标签?
heading是h1,h2,h3,h4,h5,h6 这六个Xhtml标签的统称,既标题的意思。六个标签的权重由大到小,既h1为大标题,h6为最小的标题。
写法为<h1>内容</h1>;heading标签均为块级元素(block),其嵌套规则在XHTML标签的嵌套规则一文中有提到过。
为什么要使用heading标签?
在珍爱生命 远离“DIV”+ CSS 一文中我们说到,所谓div+css,其实只是我们通俗的叫法,正确的叫法应该是Xhtml+css。
我们所使用到的标签,都应该是有含义的:比如ul是无序列表,适合做新闻列表;ol是有序列表,适合做排行版;del是删除线,适合用来放 b2c的“原价”;address里放的是地址;blockquote大段引用…其它义语标签的用法,在这里暂不一一列举,等等这些,为得是能让搜索引擎 知道,这些内容到底是什么意思,也算是比较浅显的所谓人机交互。
义语标签对于SEO的重要性大家都很明白,那么heading标签,顾名思义,标题!它们的重要性大家可想而知。
heading标签是用来诠释整个网站、频道、栏目甚至文章段落的标签。
关于heading标签的用法,网上众说纷纭,我参考了官方的说明及结合了许多网站的构架、优化经验,总结了一套自己认为合理的使用方法,仅供参考。
以下方法适用于行业门户网站、购物商城、企业网站等类型的站点。如像新浪、网易那样的大站,可以把其诸如旅游频道、科技频道等栏目理解为一个独立网站。
h1,h2,h3 的用法:
h1 — 大标题,放置于首页顶部区域,通常即导航以上的部分,全站通用,用来诠释整个网站的内容,应包含网站主关键字,但切忌不要进行关键字堆砌。最好是在网页源代码的body标签一开始的第一个容器中第一行出现。且保证一个页面中只出现一次。
h2 — 副标题,每个页面出现的次数以1-3次为宜。
首页:同h1,放置于主头部区域,于h1的下方,全站调用,同样用于概括整站的内容。或者在头部通用区域的下方,首页内容的开头或者中间部分使用一次,用于诠释首页的内容。
子频道页:无论顶部区域是否出现过一次h2,可结合实际情况在头部通用区域的下方,页面内容的开头部分使用一次,用于诠释频道页面的内容。
(以上2种方法可以任选其一,也可以同时并存)
文章/产品内页:文章的标题使用h2标签。
按以上方法,h2标签最多会被使用到3次,但是请少使用1次。据以往经验来看,文章/产品内页使用h2标签效果显著。
图例:
设计师在进行页面设计的时候就应该实现构思好heading标签的放置位置。这是云南电玩网(http://www.lhave.com)的顶 部设计。其中首页body中代码的一开始就出现了h1标签,内容为“云南电玩网,昆明电玩在线购物商城”。紧接着logo用的是h2标签,插图的alt属 性里写着“云南电玩网-昆明最大的掌机,电视游戏机网购平台”。
主意两个标签措词不同,但均包含了网站的主要关键字。
这里值得说明的是,有的网站的设计感会很强,很难给heading标签预留出前合适的位置,那么这里可以采用的是,把页面中出现的第一个img 放在h1里,比如logo,在其alt属性中写入网站名称或关键字。那么对于SEO的效果来说,经尝试是有作用的,至于效果,个人认为肯定会比把 heading标签里的文字直接出现在页面上要略差一点。
西华通讯手机在线销售b2c,用的是h1,h2在顶部全站通用。
云南货架网,企业网站。顶部全站调用一个h1,首页使用独立的h2,每个频道页面用自己独立的h2。
h3— 小标题,个人爱用于栏目的名称,如图:
以香格里拉旅投集团为例,首页及内页的栏目标题均使用h3标签。至于h3的使用次数,没有明确的规定,大家用到该用的地方就行。刚才说道h2适用于文章内页的文章标题上,那么h3我通常也用到文章的分段标题上,如本文一开始的“首先我要知道,什么是heading标签?”等。
以上主要讲述了h1-h3这3个heading标签的用法,至于h4-h6,并没有前3个那么常用,大家只要记得它们的权重为降序,举一反三即可。
heading标签的用法很灵活,jason在这里也只是抛砖引玉,后续的文章中我们会逐一分享到title的调用方法及strong与heading的区别等一些列SEO知识,敬请期待。
转载请注明出处:云南网站设计师jason http://www.playw3c.com
![技术小学生微信公众号 技术小学生微信公众号](/d/file/p/2023/11-06/384a0f88dc69e6f0b9276fec739fb818.png)
![华为服务器](/d/file/p/2023/07-25/08518ffe66f6cea5a59993d8b8d33b96.jpg)
![腾讯云服务器大促销。](/d/file/p/2023/06-06/8f2af9e8846e4a93cc2a3890462510dc.png)
文章评论 本文章有个评论