原文地址：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. 【HDOJ2586】【Tarjan离线求LCA】

    http://acm.hdu.edu.cn/showproblem.php?pid=2586 How far away ? Time Limit: 2000/1000 MS (Java/Others) ...

  2. PyCharm下载安装

    PyCharm 是一款功能强大的 Python 编辑器,具有跨平台性,鉴于目前最新版 PyCharm 使用教程较少,为了节约时间,来介绍一下 PyCharm 在 Windows下是如何安装的. 这是 ...

  3. Map 知识整理

    首先是HashMap的学习,理解散列的概念以及相关的实现,并且会学习HashMap的源码,理解为什么HashMap的速度如此之快. 声明:参考到的资料在下方列出. 1.<Java编程思想> ...

  4. eclipse项目版本控制忽略上传文件

    *.classpath *.project */.git/* .deployables .git .settings .svn _svn bin target

  5. SolrCore Initialization Failures - Max direct memory is likely too low

    org.apache.solr.common.SolrException:org.apache.solr.common.SolrException: The max direct memory is ...

  6. dive 方便的观察容器各层信息的工具

      dive 是一个方便的观察容器各层信息的工具,同时也集成了容器构建命令,方便我们在构建容器 镜像的同时查询镜像各层的变动信息 安装 mac 系统,可以按照自己的系统选择安装方式 wget http ...

  7. lamp安装总结

    1.安装准备   建一个目录用于存放各软件包的压缩文件, 如我把我的源码文件都放在了 /software目录下 切换到/software目录下,执行 wget http://dev.mysql.com ...

  8. 新鲜出炉一份Java面试清单，共200+道题

    一.Java 基础 1.JDK 和 JRE 有什么区别? 答:JRE是java运行时环境,包含了java虚拟机,java基础类库.是使用java语言编写的程序运行所需要的软件环境,是提供给想运行jav ...

  9. centos7离线安装rpm包自动解决依赖

    离线安装rpm包自动解决依赖参照https://blog.csdn.net/u011396718/article/details/80153515当生产环境由于安全原因处于断网状态的时候.通过本地源的 ...

  10. revit api 实现过滤墙图元并选中

    public IList<Element> findElementsByCategory(Autodesk.Revit.UI.UIApplication aApp, Document aD ...