HTML5教程:语义化标签是什么？有什么作用？

　2012-04-15 09:20:14　来源：WEB开发网　　　

核心提示： </tr> </thead> <tbody> <td>吃饭</td> <td>20元</td> </tbody> </table>这两块代码的标签不一样，第二个表格的这些标签代码，HTML

　　　 </tr>

　 </thead>

　 <tbody>

　　　 <td>吃饭</td>

　　　 <td>20元</td>

　 </tbody>

</table>

这两块代码的标签不一样，第二个表格的这些标签代码，无疑更符合Web标准.
<caption>:表格的标题;
<thead>:一表格的表头;
<th>:表的某一列的列头。

再说我们习以为常的
<title>博客园简介</title><body>博客园是一个软件开发的技术乐园，它于2004年创办，这里...</body>

你看，为什么我们看一篇文章，一下就知道标题在哪呢？在浏览器的顶端。那为什么搜索引擎能抓取呢？就是它知道这个语义化标签<title>里的就是文章标题，要是我们不遵守这个，而是：
<span>博客园简介</span><span>博客园是一个软件开发的技术乐园，它于2004年创办，这里...<span>

那搜索引擎怎么就知道谁是标题，谁是内容了呢？它又靠什么去抓取标题呢?其实语义化不仅可以是标签语义化,还可以延伸成结构语义化.举例:
#left{float:left;margging-left:50px;}

#right{float:right;margin-top:100px;}

<div id="left">content..</div>

<div id="right">content..</div>

这个例子里对id的命名稍微有点夸张,但是类似的情况却使有的,当我们想把#left这个div放到页面的右边,和#right调换位置时,难道你可以把样式改成这样?
#left{float:right;margin-left:50px;}

#right{float:left;margin-top:100px;}