标签：
为了在没有css的情况下，页面也能呈现出良好的文档结构和代码结构；
提高用户体验，例如title、alt可进行详细说明；
有利于SEO，爬虫只看得懂代码；
方便特殊设备的解析，如屏幕阅读器、盲人阅读器等；
便于团队的开发和维护，语义化标签使代码更具可读性。
语义化前的代码：
<div>山行</div> <div>远上寒山石径斜，</div> <div>白云深处有人家。</div> <div>停车坐爱枫林晚，</div> <div>霜叶红于二月花。</div>
语义化后的代码：
<h2>山行</h2> <p>远上寒山石径斜，</p> <p>白云深处有人家。</p> <p>停车坐爱枫林晚，</p> <p>霜叶红于二月花。</p>
语义化前的代码：
<form action="" method=""> <div> <span>账号：</span> <input type="text" id="name" /> </div> <div> <span>密码：</span> <input type="password" id="pwd" /> </div> <input type="submit" value="登录" /> </form>
语义化后的代码：
<form action="" method=""> <fieldset> <legend>登录表单</legend> <p> <label for="name">账号：</label> <input type="text" id="name" /> </p> <p> <label for="pwd">密码：</label> <input type="password" id="pwd" /> </p> <input type="submit" value="登录" /> </fieldset> </form>
语义化前的代码：
<div>几种页面的实现</div> <table border="1"> <tr> <td>实现方式</td> <td>代码量</td> <td>搜索引擎的友好</td> <td>特殊终端兼容</td> </tr> <tr> <td>table布局</td> <td>多</td> <td>差</td> <td>一般</td> </tr> <tr> <td>乱用标签的CSS布局</td> <td>少</td> <td>一般</td> <td>差</td> </tr> <tr> <td>标签语义良好的CSS布局</td> <td>少</td> <td>好</td> <td>好</td> </tr> </table>
语义化后的代码：
<table border="1"> <caption>几种页面的实现</caption> <thead> <tr> <th>实现方式</th> <th>代码量</th> <th>搜索引擎的友好</th> <th>特殊终端兼容</th> </tr> </thead> <tbody> <tr> <th>table布局</th> <td>多</td> <td>差</td> <td>一般</td> </tr> <tr> <th>乱用标签的CSS布局</th> <td>少</td> <td>一般</td> <td>差</td> </tr> <tr> <th>标签语义良好的CSS布局</th> <td>少</td> <td>好</td> <td>好</td> </tr> </tbody> </table>
标签：
原文地址：http://my.oschina.net/cobish/blog/527132
