H1标签

林海缘

H1标签

H1标签对于网页来说有着特殊的意义,一般用来标识网页或者网页的标题,同时它也是搜索引擎判断网页关键字的重要参数,因此被广泛的应用在网页当中。

由于<h1>字体的特殊性,显示的字体偏大,所以一般情况下都会通过CSS对<h1>标签样式进行重定义。

示例

示例1:重新定义H1标签的字体大小和颜色

示例代码

1. h1 {margin:23px 0 5px 0; font-size:14px; font-family:宋体; color:#19489E;text-align:center}
   
2. 定义h1字体为宋体14px大小,且颜色为淡蓝色

复制代码

示例2:在H1标签中只显示图片

示例代码

1. h1 a{display: block;height: 30px;width: 165px;float: left;text-indent: -9999px;background-image: url(images/logo.gif);background-repeat: no-repeat;}

复制代码

很好理解吧？把h1作为一个块来显示(display: block;)，指定长宽(和图片一样大小)，然后指定h1的背景图片，也就是将我们需要的图片作为h1这个标签的背景。而h1标签中插入的，仍然是作为字符形式出现的博客标题，然后用text-indent: -9999px;将文字甩到屏幕看不到的地方，9999px应该是足够了，谁的屏幕也没那么大吧!

注意事项

由于搜索引擎对<h1>的重视,因此在使用过程中必须注意以下几点注意事项:

1.每个页面都应该有H1标签，H1标签是每个网页不可缺少的要素。
2.使用H1标签的内容应该简洁明了。
3.H1标签要尽量出现在源文件代码的开头的部分,这样可以让访问者和搜索引擎蜘蛛能尽快了解页面的内容。
4.每个页面的H1标签元素的内容应该是不一样的,每个页面包含的内容肯定是不一样的,所以总能够为每个页面的H1标签找到一个不同的角度。
5.使用H1标签的元素的文字应该包含页面的目标关键字。
6.每个页面中应该只有一个H1标签,在博客网站上最常见的错误是在博客首页的每个文章标题上都使用了H1标签,首页应该将首页关键字放入H1标签。
7.使用H1标签的元素不应该加链接-如果要加的话也是链向它自己，很明显没有那个页面需要自己链向自己。

把<H1>标签给谁呢？是定义“网站名称”，还是“文章标题”？

貌似这两个都很重要，很让我头疼，使我学习Web标准进程不得不暂停一下，不把这个弄清楚，我是学不下去。

经过思考，我觉得还是根据不同情况来定义这个<H1>标签，比较好。

一、主页

因为在主页会有许多文章列表罗列，这时如果把<H1>标签用于给“文章标题”定义，那就不合适了，会造成<H1>标签重复定义，破坏了<H1>标签的唯一性。

所以在主页，<H1>标签当仁不让的用来定义“站点名称”。<H2>标签用来定义“站点副标题”。如果没有副标题，<H2>标签最好也空着，以备不时之需。

<H3>标签用来定义栏目名称，<H4>标签用来定义文章标题，但大多数内容系统，文章列表输出用<UL>标签，所以<H4>可能就派不上用场，这里只是以此类推。

二、目录页(栏目页)

目录页(栏目页)和主页类似，<H>系列标签同主页定义。

三、文章内容页

文章内容页和主页就有所区别了，对于搜索引擎所看中就是文章内容，而文章标题无疑是吸引搜索引擎的最重要的砝码了。此时如果把唯一的<H1>标签让给“网站名称”岂不浪费。

既然站点可以使用不同模版，这时我们就不能偷懒了，还是把文章内容页Header区重新调整一下，把<H1>标签让给“文章标题”。

网站名称和网站副标题的定义，用<div>来代替，分别定义成id=Title和id=SubTitle。把最有价值的<H1>标签和<H1>标签让给文章主和副标题。以利于提高文章在搜索引擎中的权重。

如果没有文章副标题，和主页的里的<H2>标签一样最好也空着，以备不时之需。这里提倡一下，<H2>和<H1>标签一样，最好都保证在页面中的唯一性。

综上所述，我认为h1在不同的页面应该有不同的定义方式

比如：
主页，h1坚决用来定义“站点名称”；
文章页，因为文章标题对SEO有好处，h1给文章标题合适；
栏目页，h1给栏目名称；
搜索页，h1给搜索关键词；
TAG页，h1定义TAGs。