原文地址：http://www.chinaz.com/web/2010/0921/134391.shtml

什么是H标签？

h1，h2，h3，h4，h5，h6，作为标题标签，并且依据重要性递减。我认为遵循这样的原则是很有必要的，它能让页面的层级关系更清楚，让搜索引擎更好地抓取和分析出页面的主题内容等等。为了更好的理解，请看下面的代码：

<body>
<h1>一级标题</h1>
<p>段落</p>
<div>
<h2>二级标题</h2>
<p>...</p>
<div>
<h3>三级标题</h3>
<p>...</p>
<div>
<h4>四级标题</h4>
<p>...</p>
</div>
</div>
</div>
</body>

浏览器的默认样式也是依据重要性递减，字号从h1到h6由大变小。而不同的浏览器中的样式又有一些差别，介于这种差别，我们通常在布局中用CSS将其统一。

大家怎么用的？

现在很多网站（包括淘宝、新浪、搜狐等知名网站），都喜欢把h1用在LOGO上， 如图：

 

大家都这样用，不无道理，其实优点蛮多的：它概括了整个页面的内容，而且LOGO离body很近，这样就方便了搜索引擎最快的抓取主题，再者从语义来说也更加精准。

当然也不是全部网站都将h1用在LOGO上，网易的用法就是比较特别的例子：

网易将h1设置了display:none样式，使其隐藏起来，这样既解决了h1不知道放哪里的矛盾又起到了SEO优化的作用，可谓一箭双雕。

而腾讯首页的h1则是头条新闻，如图：

 

从上面的例子可以看到各大网站对于h1的用法都有所不同，对于h1放哪里？一直是一个争议的问题，但我认为到底放哪里没有绝对的答案。我认为应该根据网页的定位、类型、用户搜索习惯等因素综合考虑。比如新闻类的网站，可以把h1放在头条新闻上；综合门户类的网站，那就把h1放在LOGO上吧；如果公司网站也可以把h1放在LOGO上，因为用户搜索公司一般喜欢搜公司的名称；如果有网站宣传语，还可以把h1放在宣传语上，这也是不错的选择。总之，选择一种最适合的才是最好的。

关于h2我一般喜欢把它用在首页的大栏目上，如图：

 
内容页，我更习惯把h2让给文章标题，栏目标题则用h3表示，如图：
 
h3多用于栏目标题，如图：

农信通产品首页用到的H标签，不仅有清晰的层级关系，而且突出了产品内容的重要性，对搜索引擎来说也非常有利。

下面这个例子也很有意思，如图：

栏目标题用了h2，新闻标题则用了h1，如果依照层级关系来说，它们的顺序颠倒了，但它并没有错，在实际运用H标签的时候，我们也可以根据内容的重要性来定义。所以只有在掌握好基础理论的基础上灵活的运用，才能把它的作用最大化。

从上面的几个例子中不难看出H标签的用法是很灵活的，并不是局限在这几种用法以内，我们在运用中只要遵循依据重要性递减的原则，举一反三，h4-h6亦是如此。

总结了一些些

根据参考资料、前端制作牛人、知名网站等对H标签的理解和运用，我总结了以下规范，希望能带给大家一些参考价值。

h1一级标题

代表重中之重，它的地位在页面中跟关键字的地位一样重要。一般运用于网站标题或者头条新闻上，一些大型网站也运用在LOGO上，虽然h1代码可以写多个，但实际语义上有唯一性，h1标题在一个页面里面最好只出现1次或者没有。

h2二级标题

主要出现在页面的主体内容的文章标题和栏目标题上，三列结构一般在中间，二列结构一般在重要的一边。可与h3搭配使用。

h3三级标题

一般主打页面的边侧栏。h4是它的辅助，出现频率不高。

页面层级关系不能太深，所以h4，h5，h6一般出现较少。

HTML和SEO基础知识：H标签全透视的更多相关文章

  1. [SEO基础知识] html标签优化 (摘抄)

    1.<title>页面标题</title> 百度优化全靠它!对于做百度优化来说,一定要记得这个标签可能是你是否真正能够做到网站排名提高的重点,而且这个重点绝对不容忽视.标题主要 ...

  2. 【HTML】 HTML基础知识 一些标签

    额..是这样的,去年为了学习web框架,自己开发了一个zbx配置管理的二次开发系统,当时从零开始接触web开发,也第一次接触到了前端的一些知识.其中最基础的就是html/css了.我把那部分笔记整理上 ...

  3. SEO基础知识

    SEO: SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”!SEO是指通过对网站进行站内优化和修复(网站Web结构调整.网站内容建设.网站代码优 ...

  4. js基础知识总结（全）

    1.js版HelloWorld <script type="text/javascript"> alert("HelloWorld"); </ ...

  5. Python学习-基础知识-2

    目录 Python基础知识2 一.二进制 二.文字编码-基础 为什么要有文字编码? 有哪些编码格式? 如何解决不同国家不兼容的编码格式? unicode编码格式的缺点 如何既能全球通用还可以规避uni ...

  6. 做好SEO需要掌握的20个基础知识

    作为一个网站优化者,有一些基础seo知识点是大家必须要掌握的,网站排名的好快,和这些基础的SEO优化知识有没做好,有没做到位,有着直接的关系!今天,伟伟SEO就把我前面讲的SEO优化基础知识做个总结, ...

  7. ASP.NET的SEO：基础知识

    本系列目录 首先谈一点我自己的体会,我还是希望能和大家分享: 当你读到一定数量的SEO资料后,你会发现,对同一个问题,众说纷纭,莫衷一是.这其实主要是因为以下一些原因造成的:1. 很多SEO技巧,是& ...

  8. SEO - H标签

    前言 这两天在做网站的SEO.虽然之前SEO的资料看过很多,但是因为正职是美工的缘故,SEO的具体实施参与的较少.现在的公司有点特殊,SEO团队基本不懂代码,所以需要参与的比较多.以下内容主要是通过自 ...

  9. 前端基础知识之html和css全解

    前端回顾 目录 前端回顾 基础知识 HTTP协议 认识HTML HTML组成 HTML标签 div和span标签 特殊的属性 常用标签 认识css 选择器 属性 前端就是展示给用户并且与用户进行交互的 ...

随机推荐

  1. Red Hat OpenShift

    Core Concepts 基本概念 Master Master监控其他Node和Pod 提供Web Console Node Node是k8s的工作机器 Node中运行Pod,pod可以在node中 ...

  2. 《DSP using MATLAB》Problem 5.19

    代码: function [X1k, X2k] = real2dft(x1, x2, N) %% --------------------------------------------------- ...

  3. hdu3068 最长回文 manacher

    给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度.回文就是正反读都是一样的字符串,如aba, abba等 manacher裸题 #include<stdio. ...

  4. java.lang.IllegalArgumentException: An invalid domain [.test.com] was specified for this cookie

    https://blog.csdn.net/cml_blog/article/details/52135115 当项目中使用单点登录功能时,通常会使用cookie进行信息的保存,这样就可以在多个子域名 ...

  5. 实现在同一界面打开putty终端连接工具

    用过putty的人可能知道,每打开一次啊putty程序只能开启一个连接,这个在实际运用中很不方便,反正我开ssh一般都是同时开四个窗口 其实有一个程序可以实现打开多个putty,下面是下载地址 htt ...

  6. linux 之sed

    sed 用法 sed [-nefr] [action] -i 直接修改文件内容,而不是像其他命令那样只是输出到终端 a新增c取代d删除i插入p列印常与sed -n 使用s取代 有一点需要注意的是:如果 ...

  7. Spring定时器corn表达式详解

    1.结构 Spring定时器corn表达式详解 2.各字段的含义 字段 允许值 允许的特殊字符 秒 0~59 - * / 分 0~59 - * / 小时 0~23 - * / 日期 1~31 - * ...

  8. Using C++11 function & bind

    The example of callback in C++11 is shown below. #include <functional> void MyFunc1(int val1, ...

  9. UWA 技术分享连载 转载

    技术分享连载1 Q1:Texture占用内存总是双倍,这个是我们自己的问题,还是Unity引擎的机制? Q2:我现在发现两个因素直接影响Overhead,一个是Shader的复杂度,一个是空Updat ...

  10. oracle数据字典-权限-角色-参数

    每个数据库都提供了各自的数据字典的方案,虽然形式不同,但是目的和作用是一样的,比如在mysql里数据字典是在information_schema 里表现的,sqlserver则是在sys这个系统sch ...