零基础建站培训介绍

当前位置:

html H标题标签的语法及用法

html H标题标签?

W3C指出h1-h6标签可定义标题。h1定义最大的标题。h6定义最小的标题。

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

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

html H标题标签用法

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


<h1>特别重要的标题H1</h1>

<h2>次要栏目或标题-小标题H2</h2>

<h3>再次要栏目或分类小标题H3</h3>

<h4>文中分类小标题H4</h4>

现在很多网站(包括淘宝、新浪、搜狐等知名网站),都喜欢把h1用在LOGO上, 如图:

HTML H标题标签

HTML H标题标签

HTML H标题标签

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

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

HTML H标题标签

HTML H标题标签

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

而腾讯首页的h1则是头条新闻,如图:

HTML H标题标签

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

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

HTML H标题标签

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

HTML H标题标签

h3多用于栏目标题,如图:

HTML H标题标签

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

下面这个例子也很有意思,如图:

HTML H标题标签

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

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

上一课: 下一课:

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关教程

  • 在自己做网站时,网站上有时需要制作HTML表单,表单中的填写项为了防止别人恶意提交,需要进行验证。下面介绍一下HTML表单中正则验证邮箱、手机、电话
  • 首先介绍一下什么是网页,网页是由HTML组成的一个特殊文档,它存放在网络中某台服务器中,我们如果知道了这个文档的存放位置,然后在网页浏览器中输
  • ASP 声明变量ASP 声明变量用Dim来声明(或者说定义)变量,注意,所有变量都要声明,但可以写为同一行<%dim namename="Donald Duck&quo
  • 小白如何学习好java (7409 次浏览)
    对于新手小白来说,要想学好Java,应该注重以下几个方面:第一:正确理解Java的各种“抽象”。学习Java就是学习各种“抽象”,包括类、接口和抽象类等,
  • 丰富多样的网络工具和资源的出现,使网页设计变得轻松而简单。这里介绍 28 款在线工具和生成器,以帮助你更快捷方便地设计页面。1. Lorem Ipsum Gene
  • 初学者怎样学习网页制作呢?对于初学者,网站设计有一定难度,但是网页设计特别重要,在织梦仿站教程中也需要使用到网页设计。我们需要使用一些软件,
  • 微网页制作方法 (7137 次浏览)
    微网页是为适应高速发展的移动互联网市场环境,而开发封闭式的应用客户通过微信微博,等社会化的工具实现传播、转介绍、营销型微网页转化率高,由客服
  • 网页设计培训内容包括:PhotoshopCS6课程内容关键学习培训流行图象处理手机软件Photoshop的图象处理、编写、安全通道、涂层、相对路径综合性应用;图
  • 怎么制作网页 (6471 次浏览)
    网页是由HMTL和CSS组成的,通过HTML代码和CSS代码我们就可以制作出一个网页。下面介绍一下网页制作方法。打开DW网页编辑软件新建HTML有两种方法
  • 自适应网页制作方法 (6400 次浏览)
    自适应网页制作方法特别先想到的是css3的媒体查询 media-screen 控制在不同尺寸下显示。这里说个题外话,css中的像素单位px,是逻辑像素。不是设备的