前台开发之HTML定义语义化

目的：搜索引擎看不到社觉效果，只能看到代码，通过标签判断内容的语义。通过语义化能让搜索引擎更好识别网页内容。

制作页面步骤：先确定HTML，确定语义的标签，再来选用合适的CSS。

如何确定网页语义是否良好？ 
去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

语义化几个关键点：
1.每张网页都必须有一个h1来表示大标题，且一张网页里面只存在一个h1标记。 
2.标题与内容 
注：只有当页面内标签无法满足设计需要时，才会适当添加div和span等无语义标签来辅助实现。 
(1).单标题内容

<div id="gy" class="mod">
<div class="hd clearfix">
<h2 class="mod-title">网易公司新闻</h2> 
</div>
<div class="bd">
<ul class="mod-list sub-list dotline">
<li class="title"><a href="http://tech.163.com/11/1103/11/7HUD3AVS000915BF.html">网易企业邮获最高级安全认证</a></li> 
… 
</ul>
<ul class="mod-list sub-list">
<li><a href="http://media.163.com/">[传媒]</a> <a target="_blank" href="http://media.163.com/11/1104/10/7I0PG0JM00762H91.html">电视节目生存的底线</a></li>… 
</ul> 
</div>
</div>

(2).多标题内容

<h2 class="tab-hd tab-u-9 clearfix">
<span class="tab-u current"><a href="http://book.163.com/special/vip_book/">原创</a></span> 
<span class="tab-u"><a href="http://book.163.com/special/vip_book/">全本</a></span> 
</h2>
<div class="bd tab-bd display-control">
<div class="tab-con current">
<div class="imgText-temp-1 dotline clearfix">
<div class="mod-img main-img">
<a href="http://data.book.163.com/book/home/009200260003/000BNZFL.html?wangshou1"><img src="http://img3.cache.netease.com/book/2011/11/5/20111105085539de923.jpg" alt="天书：神秘家族的字符" title="天书：神秘家族的字符" height="90" width="120" /><cite>天书：神秘家族的字符</cite></a> 
</div>
<h3 class="main-title"><a href="http://data.book.163.com/book/home/009200260001/000BNYbZ.html?wangshou1">无法呼吸：精神病院里的杀手</a></h3> 
<ul class="mod-list main-list">
<li><a href="http://data.book.163.com/book/home/009200260002/000BNZAV.html?wangshou1">[悬疑]诡闻档案：解密731部队</a></li>… 
</ul>
</div>
<ul class="mod-list main-list">
<li><a href="http://book.163.com/special/vip_book/?wangshou1">[网易原创]</a> <a target="_blank" href="http://data.book.163.com/book/home/009200260001/000BNYeO.html">冥间阴乐:民国农家棺中女尸离奇蒸发</a></li>… 
</ul>
<ul class="mod-list specialTopic-list">
<li><a href="http://book.163.com/special/minghun/?wangshou1"><em class='fB'>微活动</em></a> | <a target="_blank" href="http://book.163.com/special/minghun/">周德东《冥婚》拍电影 你来选主角</a></li>… 
</ul>
</div>
<div class="tab-con">
<div class="imgText-temp-1 dotline clearfix">
<div class="mod-img main-img">
<a href="http://data.book.163.com/book/home/009200010002/000BIUGA.html"><img src="http://img6.cache.netease.com/book/2011/11/5/201111050939467f195.jpg" alt="罂粟美人的致命诱惑" title="罂粟美人的致命诱惑" height="90" width="120" /><cite>罂粟美人的致命诱惑</cite></a> 
</div>
<h3 class="main-title"><a href="http://data.book.163.com/book/home/009200010009/000BHVZQ.html">大禁地：凶杀案引出帝王陵寝</a></h3> 
<ul class="mod-list main-list">
<li><a href="http://data.book.163.com/book/home/009200010013/000BEKaV.html">权色：副省长对女色失去兴趣</a></li>… 
</ul>
</div>
<ul class="mod-list main-list">

<li><a href="http://t.163.com/zt/book/xyjd06"><em class='cBlack fB'>诡故事</em></a> |<a target="_blank" href="http://t.163.com/zt/book/xyjd06"> 悬疑基地第六期：镜中灵魂的另一面</a></li>… 
</ul> 
</div>
</div>
</div>

结合网易的代码，个人觉得像一般的标题和内容，理想结构应该是：
单标签
<div id=”news”>
<div class=”hd”><h2>标题</h2> 更多>></div>
<div class=”bd”>内容</div> 
</div>
多标签
<div id=”news”>
<h2 class=”tab-hd”><span class="tab-u current">体育< span > < span class="tab-u " >娱乐</ span ></h2>
<div class=”hd tab-bd”>内容</div> 
</div>

3.表单 
(1).表单域要用filedset标签包起来，并用legend标签说明表单的用途。
(2).每个input标签对应的说明文本都需要使用label标签并且通过为input设置id属性，在label标签中设置for=”someid” 说明文本和相应的input关联起来
例：
<form action=”” method=””>
<fieldset>
<legend>登录表单</legend>
<p><label for=”username”>用户名</label><input type=”text” name=”username” id=”username/></p>
…
</filedset>
</form>
4.表格 
作用：展示二维数据。
表格标题要用caption,表头要用thead包围，主体部分用tbody包围，尾部要用tfoot包围，表头和一般单无格要区分开，表头用th,一般单元格用td
例：
<table>
<caption>二维数据展示</caption>
<thead>
<th>标题</th> …
</thead>
<tbody>
<td>标题对应的内容</td>
</tbody>
<tfoot>
<td>底部相关信息</td>
</tfoot>
</table>

语义化标签注意的其它问题： 
尽可能少地使用无语义标签div和span
在语义不明显的情况下，可用p和div，尽量用p，因为p默认情况 下有上下间距，去样式后的可读性更好，对兼特殊终端有利
不要使用纯样式标签，例如b\font\u改用CSS设置。语义上需要强调的文本可以包在strong或em标签里。
附: 标签语义中英文对照表