一:(理论)语义化标签是什么?

 

语义化标签就是尽量让Html的标签是有相对应的结构的含义的,以Table为例:

1 <table>
2  <tr><td>消费项目</td><td>消费金额</td></tr>
3  <tr><td>吃饭</td><td>20元</td></tr>
4  </table>

你看出了上面的Table有什么毛病吗?嘿嘿,那你看这个语义化的标签

  

1 <table>
2  <caption>花费记账</caption>
3  <thead><tr><th>消费项目</th><th>消费金额</th></tr></thead>
4  <tbody><td>吃饭</td><td>20元</td></tbody>
5  </table>

这两块代码的标签不一样,而下面这段代码,无疑更符合Web标准,

<caption>这个标签一看就是表格的标题,<thead>一看就知道是表格的表头,<th>一看就知道里面的内容是这个表的某一列的列头。这样的结构清晰更能让机器,浏览器明白它是什么意思,而第一段代码所表示的东西要含糊不清些。

再说我们习以为常的

  

1 <title>博客园简介</title><body>博客园是一个软件开发的技术乐园,它于2004年创办,这里...</body>

你看,为什么我们看一篇文章,一下就知道标题在哪呢?在浏览器的顶端。那为什么浏览器能抓取呢?就是它知道这个语义化标签<title>里的就是文章标题,要是我们不遵守这个,而是

  

1 <span>博客园简介</span><span>博客园是一个软件开发的技术乐园,它于2004年创办,这里...<span>

那浏览器怎么就知道谁是标题,谁是内容了呢?

二:(理论)语义化标签怎么样?

  

   1.结构更好,更利于搜索引擎的抓取(SEO的优化)和开发人员的维护(可维护性更高,因为结构清晰)。

  2.更有利于特殊终端的阅读(手机,个人助理等)。 

三:(行动)语义化标签怎么办?

 

   尽量用有结构含义的,少用无语义的,如<span>,<div>无意义,看不出是什么东西,可是<address>一看就知道这里面的是地址。

那么,怎么判断你的页面是否符合Web标准之一:语义化标签呢?你可以把你的页面暂时去掉样式后看可读性怎么样,如果这个时候感觉你的页面很乱,那就说明的的页面的语义化标签不怎么样,而如果你的页面去掉样式了感觉依然不是杂乱无章的,那么,就说明你的页面结构清晰,语义化标签比较可以了。

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

    为了保证网页去掉样式后可读性依然好,并且又符合Web标准,我们应该注意以下几点:

   尽可能少的使用无语义标签,如span,div;

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

   不要使用纯样式标签,例如b,font和u等,改用CSS设置。语义上需要强调的文本可以包含在strong或em里,这两个标签有"强调"的语义,其中前者是默认加粗,后者是斜体。

 

这只是我的一点看法,希望抛砖引玉一下,看过的人把自己的想法也说出来,让大家知道你的想法,也是完善此文。

posted on 2011-05-25 12:24  兰悦儿  阅读(2197)  评论(8编辑  收藏  举报