heading标签:HTML之h1 h2 h3 h4标签用法经验知识

来源：heading标签　浏览：3575次　时间：2014-02-11

heading标签:HTML之h1 h2 h3 h4标签用法经验知识

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

heading是h1，h2，h3，h4，h5，h6 这六个Xhtml标签的统称，既标题的意思。六个标签的权重由大到小，既h1为大标题，h6为最小的标题。

写法为

内容

；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个那么常用，大家只要记得它们的权重为降序，举一反三即可。

h1 h2 h3 h4标签用法经验知识

Html中H1、H2、H3、H4标题标签元素教程篇

H1 H2 H3 H4标题标签常常使用在一个网页中唯一标题、重要栏目、重要标题等情形下。

H1 H2 H3 H4目录

搜索引擎下看h1标题标签
Html h1 h2 h3 h4用法
H型标签案例截图
html标题标签使用原则
html h1 h2 h3 h4总结

一、搜索引擎下看h1标题标签：

针对搜索引擎来说是告诉了不同标签下代表不同的重要级别内容。如果你在一个网页中使用的1-2中H型标签中都含有一个相同关键字，搜索引擎也会格外注重你所注重关键字与内容，但切记无滥用。

二、Html h1 h2 h3 h4用法HTML代码片段：

<h1>最重要的标题H1</h1>
<h2>次要栏目或标题-小标题H2</h2>
<h3>再次要栏目或分类小标题H3</h3>
<h4>文中分类小标题H4</h4>

三、H型标签案例截图：

HTML标题标签使用案例截图

在没有赋予H1 H2 H3 H4标签任何CSS样式时候，字体大小h1大于h2大于h3大于h4如上案例截图

四、html标题标签使用原则

H1在一个网页中最好只使用一次，如对一个网页唯一标题使用。
H2、H3、H4标签则可以在一个网页中多次出现，但必要随意添加或添加过度。

五、html h1 h2 h3 h4总结

在一个网页中可以适当使用h1 h2 h3 h4标签，有利于网页的重点部分突出，同时也利于搜索引擎排名，但切记滥用多用H1 H2 H3 H4标签，适当使用即可，一切从用户体验出发来使用。如果需要控制这些标题标签的大小、背景、宽度、高度、CSS加粗与否都可以通过DIV CSS来实现对其样式重新定义。
使用CSS样式初始化H1 H2 H3 H4标签代码：

H1,h2,h3,h4{font-size:12px; font-weight:normal}
我们初始化了字体大小设置为12px，去除了H1 H2 H3 H4文字加粗样式。根据范例可扩展运用。