HTML和SEO基础知识：H标签全透视
原文地址：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我一般喜欢把它用在首页的大栏目上，如图：
农信通产品首页用到的H标签，不仅有清晰的层级关系，而且突出了产品内容的重要性，对搜索引擎来说也非常有利。
下面这个例子也很有意思，如图：
栏目标题用了h2，新闻标题则用了h1，如果依照层级关系来说，它们的顺序颠倒了，但它并没有错，在实际运用H标签的时候，我们也可以根据内容的重要性来定义。所以只有在掌握好基础理论的基础上灵活的运用，才能把它的作用最大化。
从上面的几个例子中不难看出H标签的用法是很灵活的，并不是局限在这几种用法以内，我们在运用中只要遵循依据重要性递减的原则，举一反三，h4-h6亦是如此。
总结了一些些
根据参考资料、前端制作牛人、知名网站等对H标签的理解和运用，我总结了以下规范，希望能带给大家一些参考价值。
h1一级标题
代表重中之重，它的地位在页面中跟关键字的地位一样重要。一般运用于网站标题或者头条新闻上，一些大型网站也运用在LOGO上，虽然h1代码可以写多个，但实际语义上有唯一性，h1标题在一个页面里面最好只出现1次或者没有。
h2二级标题
主要出现在页面的主体内容的文章标题和栏目标题上，三列结构一般在中间，二列结构一般在重要的一边。可与h3搭配使用。
h3三级标题
一般主打页面的边侧栏。h4是它的辅助，出现频率不高。
页面层级关系不能太深，所以h4，h5，h6一般出现较少。
HTML和SEO基础知识：H标签全透视的更多相关文章
- [SEO基础知识] html标签优化 (摘抄)
1.<title>页面标题</title> 百度优化全靠它!对于做百度优化来说,一定要记得这个标签可能是你是否真正能够做到网站排名提高的重点,而且这个重点绝对不容忽视.标题主要 ...
- 【HTML】 HTML基础知识 一些标签
额..是这样的,去年为了学习web框架,自己开发了一个zbx配置管理的二次开发系统,当时从零开始接触web开发,也第一次接触到了前端的一些知识.其中最基础的就是html/css了.我把那部分笔记整理上 ...
- SEO基础知识
SEO: SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”!SEO是指通过对网站进行站内优化和修复(网站Web结构调整.网站内容建设.网站代码优 ...
- js基础知识总结（全）
1.js版HelloWorld <script type="text/javascript"> alert("HelloWorld"); </ ...
- Python学习-基础知识-2
目录 Python基础知识2 一.二进制 二.文字编码-基础 为什么要有文字编码? 有哪些编码格式? 如何解决不同国家不兼容的编码格式? unicode编码格式的缺点 如何既能全球通用还可以规避uni ...
- 做好SEO需要掌握的20个基础知识
作为一个网站优化者,有一些基础seo知识点是大家必须要掌握的,网站排名的好快,和这些基础的SEO优化知识有没做好,有没做到位,有着直接的关系!今天,伟伟SEO就把我前面讲的SEO优化基础知识做个总结, ...
- ASP.NET的SEO：基础知识
本系列目录 首先谈一点我自己的体会,我还是希望能和大家分享: 当你读到一定数量的SEO资料后,你会发现,对同一个问题,众说纷纭,莫衷一是.这其实主要是因为以下一些原因造成的:1. 很多SEO技巧,是& ...
- SEO - H标签
前言 这两天在做网站的SEO.虽然之前SEO的资料看过很多,但是因为正职是美工的缘故,SEO的具体实施参与的较少.现在的公司有点特殊,SEO团队基本不懂代码,所以需要参与的比较多.以下内容主要是通过自 ...
- 前端基础知识之html和css全解
前端回顾 目录 前端回顾 基础知识 HTTP协议 认识HTML HTML组成 HTML标签 div和span标签 特殊的属性 常用标签 认识css 选择器 属性 前端就是展示给用户并且与用户进行交互的 ...
随机推荐
- L1-059 敲笨钟 （20 分)
微博上有个自称“大笨钟V”的家伙,每天敲钟催促码农们爱惜身体早点睡觉.为了增加敲钟的趣味性,还会糟改几句古诗词.其糟改的方法为:去网上搜寻压“ong”韵的古诗词,把句尾的三个字换成“敲笨钟”.例如唐代 ...
- （0）diango、ORM的语法
Django PS:Django默认的是sqlite3数据库 PS:settings里面的这里可以修改数据库 1.^ 这个符号就是以什么开头 #url(r'index/',views.index) ...
- Stm32L0串口中断接收使用
最新在做LoRa的项目,使用的是STM32L072和SX1276,需要做一个串口透传模块,刚开始做demo的时候不考虑功耗,所以串口发送和接收直接使用下列函数执行: HAL_UART_Transmit ...
- 《DSP using MATLAB》Problem 6.5
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- 直面Java 第004期。
什么是值传递,什么是引用传递.为什么说Java中只有值传递 对于初学者来说,要想把这个问题回答正确,是比较难的.在第二天整理答案的时候,我发现我竟然无法通过简单的语言把这个事情描述的很容易理解,遗憾的 ...
- 【HAOI2011】problem a
又看题解了,这样下去要跪啊QAQ 原题: 一次考试共有n个人参加,第i个人说:“有ai个人分数比我高,bi个人分数比我低.”问最少有几个人没有说真话(可能有相同的分数) 1≤n≤100000 0≤ ...
- Easyui datagrid 去掉表头的checkbox复选框
$(".datagrid-header-check").html(""); 在onLoadSuccess中加入此行代码即可实现datagrid去除表头的chec ...
- day39机器学习
2 Numpy快速上手 2.1. 什么是Numpy Numpy是Python的一个科学计算的库 主要提供矩阵运算的功能,而矩阵运算在机器学习领域应用非常广泛 Numpy一般与Scipy.matplot ...
- day12Flume、azkaban、sqoop
1.PS:Hive中好少有update这个方法,因为他主要是用来批量数据的处理分析. 2.PS:软连接和硬连接的区别 软连接就是我们普通和Windows系统一样的快捷方式,她也是一个文件 硬连接就是他 ...
- Spring定时器corn表达式详解
1.结构 Spring定时器corn表达式详解 2.各字段的含义 字段 允许值 允许的特殊字符 秒 0~59 - * / 分 0~59 - * / 小时 0~23 - * / 日期 1~31 - * ...