html标签语义化的重要性

作者:前端大碗茶儿日期:2016-06-30 12:06:48 点击:1207 html 标签

首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字,起到了强调的作用。以上都是官方的文字,其实用一句话表述就是“合理的标签做合理的事情”。

在做前端开发的时候要记住:HTML告诉我们一块内容是什么(或其意义),而不是它长的什么样子。当我们提到“语义标记”的时候,我们所说的HTML应该是完全脱离表现信息的,其中的标签应该都是语义化地定义了文档的结构。

那么为什么要遵循标签语义化呢,我们看一下没有遵循表卡语义化的内容。


    <!--以下是标题-->
    <p>我担心年龄大了学了也没有用:30岁改行学进新浪,我不悔选择</p>
    <!--以下是正文-->
    <div> 在珠峰培训学习的三个月时间里,很多事给我留下了深刻的印象,
    之前许博同学已经详细的介绍了我们的学习生活,<br/>
    我就不再赘述了,我只想说下我们的珠峰老师,一位身高一八三的河北爷们,
    不要说我拍马屁,我是很客观的哦。<br/>
    认识珠峰老师是从他网上教学视频中沙哑的声音开始的,当时一听感觉这个人一定是讲课讲太多了,
    嗓子都劈了。<br/>
    后来还特意向他求证过,他说这嗓音是天生的,能天生就有这么励志声音的人真是不多啊,
    一定要保护好这独特的嗓音。<br/>
    开个玩笑,老师不要生气哈~</div>
    
                        

这样的结构也可以清晰的写出想要表达的内容,但是段落与段落之间是没有区分的,只是用br标签进行了强制折行,但是我们这个是有标题和内容的区别的,抓取是也是会抓取标题进行推送的,那么按照标签语义化的规则我们要怎么编写呢?


    <!--此处是标题-->
    <h1>我担心年龄大了学了也没有用:30岁改行学进新浪,我不悔选择</h1>
    <!--以下是正文-->
    <p> 在珠峰培训学习的三个月时间里,很多事给我留下了深刻的印象,
    之前许博同学已经详细的介绍了我们的学习生活,我就不再赘述了,
    我只想说下我们的珠峰老师,一位身高一八三的河北爷们,不要说我拍马屁,
    我是很客观的哦。</p>
    <p> 认识珠峰老师是从他网上教学视频中沙哑的声音开始的,
    当时一听感觉这个人一定是讲课讲太多了,嗓子都劈了。后来还特意向他求证过,
    他说这嗓音是天生的,能天生就有这么励志声音的人真是不多啊,一定要保护好这独特的嗓音。
    开个玩笑,老师不要生气哈~</p> 
                        

h1标签是页面中的大标题,重要度五颗星,搜索引擎一下子就get到了重点,p标签之前说过是段落标签,可以将混在一起的内容分成独立的段落,更利于页面排版和用户阅读。以上只是简单的举个栗子,那么下面我们来总计一下为什么要遵循标签语义化吧!(重点记忆哦!!!!)

为什么要遵循标签语义化:

  • 1、利于SEO优化(也就是搜索引擎的抓取,搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重);
  • 2、在样式丢失的时候,还是可以比较好的呈现结构;
  • 3、更好的支持各种终端,例如无障碍阅读和有声小说等;
  • 4、利于团队开发和维护,W3C给我们定了一个标准,那么团队中都遵循这个标准,那么代码的差异就会缩小,在开发和维护的时候就可以提高效率;

日常工作中怎样遵循标签语义化:

  • 1、尽量减少使用无意义标签,例如span和div;
  • 2、尽量不使用标签本身的css属性,例如b、font、s等标签,如果需要这些样式,那么使用css样式来进行添加;
  • 3、在需要强调的部分,使用strong、em,但是样式尽量使用css样式来描述;
  • 4、表格搭建时,使用<thead>表格头部</thead> <tbody>表格身体</tbody> <tfoot>表格尾部</tfoot>
  • 5、列表搭建时,使用<ul>无序列表</ul> <ol>有序列表</ol> <dl>定义列表</dl>

上一篇: html标签分类及常用标签

下一篇: css元素居中