浅谈 标签的语义化

1 标签的语义

       定义：

               HTML为我们提供了相当丰富的标签，简单来说，html标签语义即html标签的含义。

       下面的图表就是一部分的标签和含义。

    下面我们来结合例子看一下一些常用的标签。

    <Hx>
    <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题标签，并且依据重要性递减。<h1>是最高的等级。
    例如
    <h1>主标题</h1>
    <h2>次标题</h2>
    而不要使用
    <div class="title">主标题</div>
    <div class="title">次标题</div>
    搜索引擎是不能分清楚谁是主标题，谁是副标题的。 

   

    <p>
        段落标记，知道 了<p>作为段落，你就会放弃用<br/>来换行了，而且不需要<br/><br/>来区分段落与段 落。

       <p></p>中的文字会自动换行，而且换行的效果优于<br/>。关于搜索引擎方面<p>代表定义主题文字，<p>内的文字会被搜索引擎认为是网页上的描述主要内容文字区。

    <ul>、<ol>、<li>
    <ul> 无序列表标签，<ol>有序列表标签也是经常使用到的。在web标准化过程中，<ul>还被更多的用于导航条，这样做是完全正确 的，而且当你的浏览器不支持CSS的时候，导航链接仍然很实用。另外还有一个好处是<ul><ol>的代码相 对<table>而言比较少，对网页下载十分有利。在此并无其他含义。

    <dl>、<dt>、<dd>

    dl就是“定义列表”。现在来对无序列表标签和有序列表标签语义化效果进行对比。下面的例子的语义化后代表列表的标题是dog，描述的内容是 A carnivorous mammal of the family Canidae.

<dl><dt>Dog</dt><dd>A carnivorous mammal of the family Canidae.</dd></dl> 

    <em>、 <strong>

    <em> 是用作强调的，<strong>是用作重点强调的。大部分浏览器用斜体显示强调的内容，用粗体来显示重点强调的内容，如果是为了确定强调内容的显示方式，最好的方法就是使用CSS来定义他们的表现。

但是，要面对搜索引擎<em>和<strong>的标签就大有用处，适当使用<em>、<strong>标签可以突出网页内关键词是什么，是seo工作的首选标签。

    <table>、<td>、<th>、< caption >

XHTML中的表格标签不光是用来布局的。<th>为表格标题,<caption>标签为首部说明，<thead>标签为表格头部，<tbody>标签为表格 主体内容，<tfoot>标签为表格尾部。

对于搜索引擎来说这些标签都是挺有用的，例如<th>语义化的含义与<hx>语义化的含义是基本相同的，<tbody>又类似<p>的作用。读者看到这里大概已经发觉了语义化的标签含义是相通的。

    <alt>< title>

title属性用来为元素提供额外说明信息title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。 一张图片上绘画的图案或者 名称搜索引擎是抓取不到的，所以在图片上使用alt标签已经为图片增加一段描述的文字，在这里<alt>标签的作用就类似 于<p>的作用。<Title>标签作用类似于<alt>标签。

<img src="/chinaz.com/images/logo.gif" width="90" height="27" alt="中国站长站（chinaz）">

<a href="http://chinaz.com/Webbiz/Exp/Index.html" title="建站经验">建站经验</a>

2 为什么要使用语义化标签

  2.1语义化标签

     答：

     使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页的结构，抓取重要内容。去掉样式后也会根据浏览器的默认样式很好地组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。

     语义良好的布局优点：

    1.页面表现力强

    2.标签语义化非常清晰，结构良好

    3.代码量少。无用信息最小化。减少了下载时间，对搜索引擎友好

    4.代码组织良好，容易维护

    5.对于网页来说，结构处于绝对的核心位置

    6.对样式的依赖程度低，去样式可读性良好，最大程度兼容特殊终端

   2.2反面例子

     传说中的“多类”病

    乱用标签

 

2.3正面例子

    W3c 的页面，结构和语义化都做得很好，代码简洁，结构清晰。

3 如何确定你的标签是否语义良好

         CSS 是用来控制网页的样式的，那么是不是说，如果一个网页不使用CSS，网页就没有样式了呢？

         不是的，浏览器会根据标签的语义给定一个默认的样式。比如h1、h2、h3 系列标签，会有加粗、上下边距等默认样式，而且字体会依次减小；ul会有缩进、黑点的默认样式；strong 会有加粗的默认样式，em 会有斜体的默认样式。

         也就是说，判断网页标签语义是否良好的一个简单方法就是：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

         除了去样式后的可读性外，值得重点提及的还有h 标签。h 标签的含义是“标题”，搜索引擎对这个标签比较敏感，尤其是h1 和h2。一个语义良好的页面，h 标签应

该是完整有序没有断层的。也就是说，要按照h1、h2、h3、h4 这样依次排列下来，不要出现类似h1、h3、h4，漏掉h2 的情况。

      例子如下：

      1.W3C 的官方站在去样式后依然有良好的结构和可读性，而且文件大纲也脉络分明、井然有序，为“什么是语义化良好的网页”做出了标榜作用。

    反面例子：http://www.zjtcn.com/      去掉样式之后页面的逻辑结构是乱了套的。

     再来一个天涯微博首页的文件大纲和去掉样式之后的结构。

4 常见的模块你真的很了解了吗

      直接上例子，如果要实现下面的例子，有很多方案。

     

    

     方案一：

   

<div class="h2">标签的语义<a href="#">更多>></a></div><div class="p">段落一的内容……<span class="strong">根据浏览器的默认样式</span>。。。</div><div class="p">段落二的内容……</div>语义<分隔 class="h2">标签的语义<锚点 href="#">更多>></锚点></分隔><分隔>段落一的内容……<范围 class="strong">根据浏览器的默认样式 </范围>……</分隔><分隔>段落二的内容</分隔>

   

我们只能看到“分隔”、“范围”这样的无语义标签，从标签上看不出结构的逻辑。 

      方案二：

<h2>标签的语义 <a href="#">更多>></a> </h2><p>段落一的内容……<strong>根据浏览器的默认样式 </strong>……</p><p>段落二的内容</p>标签的语义：<二级标题>标签的语义<锚点 href="#">更多>></锚点> </二级标题><段落>段落一的内容……<强调>根据浏览器的默认样式 </强调>……</段落><段落>段落二的内容</段落>

方案二大有改进，从标签中能清楚地看到标题和内容的划分，也能看到“根据浏览器的默认样式”被强调了

    方案三：

<div class="title"><h2>标签的语义</h2><a href="#">更多>></a></div><p>段落一的内容……<strong>根据浏览器的默认样式 </strong>……</p><p>段落二的内容</p>

    总结：

    现在我们的代码既精简，语义又清晰。这里需要特别说明的是，当页面内标签无法满足设计需要时，才会适当添加div 和span 等无语义标签来辅助实现。

5 语义化标签应注意的一些其他问题

    为了保证网页去样式后的可读性，并且又符合Web 标准，我们应注意以下几点：

    1. 尽可能少地使用无语义标签div 和span；

    2.在语义不明显，既可以用p 也可以用div 的地方，尽量用p，因为p 默认情况下有上下间距，去样式后的可读性更好，对兼容特殊终端有利；

    3.不要使用纯样式标签，例如b、font 和u 等，改用CSS 设置。语义上需要强调的文本可以包在strong 或em 标签里，strong 和em 有“强调”的语意，其中strong 的默认样式是加粗，而em 的默认样式是斜体。

注：部分截图例子摘自《编写高质量代码:Web前端开发修炼之道》一书。

Author: Alone
Antroduction: 高级前端开发工程师
Sign: 人生没有失败，只有没到的成功。