零基础建站培训介绍

当前位置:

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 H标题标签?W3C指出h1-h6标签可定义标题。h1定义最大的标题。h6定义最小的标题。h1,h2,h3,h4,h5,h6,作为标题标签,并且依据重要性递
  • 有zblog用户发现z-blog博客文章列表分页的title标题都是重复的,对SEO优化影响肯定不好。z-blog分页title标题调用的是catelog.html页面的title标题,
  • wecenter整个系统好像根本就没有考虑过SEO优化,就连Title的识别也是随意的许多,在使用这个cms来完成我们自己的需求的时候,适当的修改是比不可少的
  • HTML 文本格式化:使用 pre 标签对空行和空格进行控制。“计算机输出”标签:这些标签常用于显示计算机/编程代码。引用标签:使用 blockquote
  • HTML粗体标签:HTML b 标签b 标签-- 定义粗体文字 不符合标准网页设计的理念,不赞成使用. b标签是成对出现的,以<b>开始,以</b>结束 .
  • HTML换行标签:<BR/>br 是换行(Break)的缩写。文本会在这个标签的地方换行。在HTML代码里直接换行的话,按浏览器的不同可能显示为一个空格,或
  • html 标签基本语法 (116758 次浏览)
    html 标签基本语法有以下几个特点:刚刚接触超文本,遇到的最大的障碍就是一些用“<”和“>”括起来的句子,我们称它为标签,是用来分割和标记
  • html基本语法汇总 (17109 次浏览)
    简介HTML(Hyper Text Mark-up Language超文本标记语言):不是编程语言,而是一种描述性的标记语言,用于描述网页中内容的显示方式,比如文字以什
  • 我们学习了HTML课程,知道一个超链接可以用A标签,新窗口打开使用target="_blank" 属性。除使用使用A标签打开之后,我们还可以使用JS来打开链接地址。
  • 我们在自己建网站时,经常需要用到background属性。我们还可以通过background-size来控制背景图片的尺寸。background-size有几个属性值,常用的是