為了使我們的網站更好的被搜索引擎抓取收錄，更自然的獲得更高的流量，網站標簽的語義化就顯得尤為重要。所謂標簽語義化，就是指標簽的含義。為了更好的理解標簽的語義化，先看下面這個例子：
<table>
<tr>
<td>娛樂項目</td>
<td>項目支出</td>
</tr>
<tr>
<td>聚餐</td>
<td>200元</td>
</tr>
</table>
上面這一段代碼就是明顯的沒有使用語義化標簽的例子，為了讓它的結構更加清晰，正確的做法如下：
<table>
<caption>支出統計</caption>
<thead>
<tr>
<th>娛樂項目</th>
<th>項目支出</th>
</tr>
</thead>
<tbody>
<td>聚餐</td>
<td>200元</td>
</tbody>
</table>
其中:
<caption>:表格的標題;
<thead>:一表格的表頭;
<th>:表的某一列的列頭。
是的，標簽語義化的目的就是對搜索引擎友好，有了良好的結構和語義我們的網頁內容便自然容易被搜索引擎抓取，這種符合搜索引擎收索規則的做法，網站的推廣便可以省下不少的功夫，而且可維護性更高，因為結構清晰,十分易于閱讀。這也是搜索引擎優化SEO（search engine optimization）重要的一步，當然關于SEO遠遠不止如此，要了解更多有關SEO的內容知識，可移步：
http://baike.baidu.com/link?url=f_v0cbvzTIxhwKNaJtdd-qGjGMefJww4ko9pJaZj4rJArylR_dpUZsobKKLlMKBi
http://www.seoxuetang.com/
言歸正傳，所以我們要做的，就是語義化我們的HTML標簽和屬性，如：
div 語義：Division(分隔)
span 語義：Span(范圍)
ol 語義：Ordered List(排序列表)
ul 語義：Unordered List(不排序列表)
li 語義：List Item(列表項目)
1.<Hx>
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作為標題使用，并且依據重要性遞減。<h1>是最高的等級。
2.<p>
段落標記，知道了<p>作為段落，你就不會再使用<br/>來換行了，而且不需要<br/><br/>來區分段落與段落。<p></p>中的文字會自動換行，而且換行的效果優于<br>。
3.<b>、<em>和<strong>
<b>標簽語義為“加粗”
<em>標簽語義為“強調”
<strong>標簽語義為“更強烈的強調” 而且em 默認用斜體表示，strong 用粗體表示。
當我們知道了這三個標簽的語義時，做SEO時就好決定用哪個來強調重要的關鍵字了，強調用<em>和<strong>，純粹加粗用<b>。
4.<ul>標簽、<ol>標簽、<li>標簽
<ul>標簽語義為定義無序列表
<ol>標簽語義為定義有序列表
<li>標簽語義為定義列表項目
因此當涉及到列表的項目，應該用<ul><li>或<ol><li>（或者是<dl><dt><dd>來布局），而不是用<table>或<p>甚至<span>。
5.<dl>標簽、<dt>標簽、<dd>標簽
<dl>標簽語義為定義了定義列表
<dt>標簽語義為定義了定義列表中的項目（即術語部分）
<dd>標簽語義為定義列表中定義條目的定義部分
所以，當我們用帶標題的列表時，即可采用<dl><dt><dd>自定義列表實現
6.<span>標簽
<span>標簽的語義為被用來組合文檔中的行內元素
（另外應當區分<span>和<div>的區別，<div>是塊級元素（block level），
而<span>是行內元素，前者的內容會自動換行，而后者前后不會自動換行
http://www.cnblogs.com/coco1s/p/3578947.html）
7.<q>、 <blockquote>、<cite>
<q>標簽的語義為用來標記簡短的單行引用，Web瀏覽器會自動識別在<q>之間的內容
<blockquote>標簽的語義為用來標記那些一段或者好幾段的長篇引用
<cite>標簽既可以與<q> 一起用，也可以與<blockquote>一起用，用來提供引用內容的來源地址。
看一個例子:
<p> <cite>孔子</cite>曰：<q>有朋自遠方來，不亦樂乎</q>.
</p>
<blockquote cite="http://www.w3cn.org/">
<p>
我們大部分人都有深刻體驗，每當主流瀏覽器版本的升級，我們剛建立的網站就可能變得過時，我們就需要升級或者重新建造一遍網站。例如1996-1999年典型的"瀏覽器大戰"，為了兼容 Netscape 和 IE，網站不得不為這兩種瀏覽器寫不同的代碼。同樣的，每當新的網絡技術和交互設備的出現，我們也需要制作一個新版本來支持這種新技術或新設備，例如支持手機上網的 WAP 技術。類似的問題舉不勝舉：網站代碼臃腫、繁雜浪費了我們大量的帶寬；針對某種瀏覽器的 DHTML 特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無法瀏覽網站等等。這是一種惡性循環，是一種巨大的浪費。
</p>
</blockquote>
8.<table>、<th>、<td>、<caption>
<table>標簽的語義的為定義 HTML 表格
<th>標簽的語義為定義表格內的表頭單元格
<caption>標簽的語義為定義表格標題
9.<button>標簽、<input>標簽、<textarea>標簽
<button>標簽的語義為定義一個按鈕
<input> 標簽的語義為用于搜集用戶信息，根據不同的 type 屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。
<textarea>標簽的語義為定義多行的文本輸入控件
button控件 與 <input type="button"> 相比，提供了更為強大的功能和更豐富的內容。<button> 與 </button> 標簽之間的所有內容都是按鈕的內容，其中包括任何可接受的正文內容，比如文本或多媒體內容。
10.<label> 標簽
<label>標簽的語義為為input元素定義標注（標記）
11.<ins>, <del>
<ins>標簽的語義為定義已經被插入文檔中的文本。
<del>標簽的語義為定義文檔中已被刪除的文本。
<ins>與 <del> 一同使用，來描述文檔中的更新和修正。知道del，就不要再用<s>做刪除線了，用del顯然更具有語義化。而且del還帶有cite和datetime來表明刪除的原因以及刪除的時間。ins是表示插入，也有這樣的屬性。
關于這兩個標簽的用法，可以參看:
http://www.w3school.com.cn/tags/tag_ins.asp
http://www.w3school.com.cn/tags/tag_del.asp
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。