《Web前端开发精品课 HTML与CSS进阶教程》——2.2 标题语义化-阿里云开发者社区

开发者社区> 开发与运维> 正文

《Web前端开发精品课 HTML与CSS进阶教程》——2.2 标题语义化

简介:

本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第2章,第2.2节,作者: 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2 标题语义化

h1~h6是标题标签,h表示“header”。h1~h6在HTML语义化中占有极其重要的地位。h1~h6按照标题的重要性依次递减,其中h1重要性最高,h6重要性最低。

相对于其他语义化标签,h1~h6在搜索引擎优化(即SEO)中占有相当重要的地位。在一个页面中,h1~h6这6个标签,我们不需要全部都用上,都是根据需要才用的。对于h1~h6,一般情况下我们只会用到h1、h2、h3和h4,很少再会去用h5和h6,因为一个页面不可能用到那么多级的标题。并且从搜索引擎优化的角度来说,h1、h2、h3和h4这4个标签会被赋予一定的权重,而h5和h6的权重跟普通标签差不多,在SEO优化上意义不大。

对于标题h1~h6的语义化,我们需要注意以下四个方面。

(1)一个页面只能有一个h1标签。

(2)h1~h6之间不要断层。

(3)不要用h1~h6来定义样式。

(4)不要用div来代替h1~h6。

1.一个页面只能有一个h1标签
h1标签表示每个页面中最高层级的标题,搜索引擎会赋予h1标签最高权重。虽然W3C没有明确规定一个页面不能有多个h1标签,但是我们还是推荐“一个页面一个h1标签”的做法。如果一个页面出现多个h1,对搜索引擎可能不好,也可能会被判以作弊。就像你写文章一样,一个页面就等于一篇文章,你见过一篇文章有多个主标题的么?

2.h1~h6之间不要出现断层
搜索引擎对h1~h6标签比较敏感,尤其是h1和h2。一个语义良好的页面,h1~h6应该是完整有序而没有出现断层的。也就是说,要按照“h1、h2、h3、h4”这样的顺序依次排列下来,不要出现“h1、h3、h4”而漏掉h2的情况。

3.不要用h1~h6来定义样式
我们都知道h1~h6是有默认样式的,如图2-1所示。在实际开发中,很多时候我们需要为文本定义字体加粗或者字体大小。有些人喜欢用h1~h6来代替CSS,使用标签来控制样式,这是一种非常不好的做法。我们一定要记住,HTML关注的是结构(语义),CSS关注的是样式,结构跟样式应该分离。


311945d99b8556176d9ecf4c64aea6e421c78d1b

4.不要用div来代替h1~h6
从语义上来说,一个页面的标题应该使用h1~h6标签,不要使用div来代替。

举例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
   <style type="text/css">
     body{font-family:"微软雅黑";font-size:14px;}
     .content
     {
       width:300px;
       padding:10px;
        border:1px dashed gray;
     }
     .content div
     {
       font-size:16px;
       font-weight:bold;
       height:24px;
       line-height:24px;
     }
   </style>
</head>
<body>
   <div class="content">
     <div>web前端开发</div>
     <p>web前端开发最核心3个技术:HTML、CSS和JavaScript。HTML控制网页的结构,CSS控制网页的样式,JavaScript控制网页的行为。</p>
   </div>
</body>
</html>

在浏览器预览效果如图2-3所示。


1335b8d0011a773664d38093bc47442911c680d1

分析:
div是无语义的标签,如果使用div来代替h1~h6,后期维护比较困难,而且对SEO影响也非常大。因为这种做法会让一个页面丢失大量的权重。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章