目的：搜索引擎看不到社覺效果，只能看到代碼，通過標簽判斷內容的語義。通過語義化能讓搜索引擎更好識別網頁內容。

制作頁面步驟：先確定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標簽里。
附: 標簽語義中英文對照表

標簽名	英文全拼	中文翻譯
a	anchor	錨
abbr	abbreviation	縮寫詞
acronym	acronym	取首字母的縮寫詞
address	address	地址
b	bold	粗體
big	big	變大
blockquote	block quotation	區塊引用于
br	break	換行
caption	caption	標題
center	center	居中
dd	definition description	定義描述
del	delete	刪除
div	division	分隔
dl	definition list	定義列表
dt	definition term	定義術語
em	emphasized	加重
fieldset	fieldset	域集
font	font	字體
h1~h6	header1~header6	標題1~標題6
hr	horizontal rule	水平尺
i	italic	斜體
ins	inserted	插入
legend	legend	圖標
li	list item	列表項目
ol	ordered list	排序列表
p	paragraph	段落
pre	preformatted	預定義格式
s	strikethrough	刪除線
small	small	變小
span	span	范圍
strong	strong	加重
sub	subscripted	下表
sup	superscripted	上標
u	underlined	下劃線
ul	unordered list	不排序列表
var	variable	變量

總結

以上是生活随笔為你收集整理的前台开发之HTML定义语义化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。