Html標籤的語義化

爲了使咱們的網站更好的被搜索引擎抓取收錄，更天然的得到更高的流量，網站標籤的語義化就顯得尤其重要。所謂標籤語義化，就是指標籤的含義。
爲了更好的理解標籤的語義化，先看下面這個例子：

<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>&#8220;咱們大部分人都有深入體驗，每當主流瀏覽器版本的升級，咱們剛創建的網站就可能變得過期，咱們就須要升級或者從新建造一遍網站。例如1996-1999年典型的"瀏覽器大戰"，爲了兼容 Netscape 和 IE，網站不得不爲這兩種瀏覽器寫不一樣的代碼。一樣的，每當新的網絡技術和交互設備的出現，咱們也須要製做一個新版原本支持這種新技術或新設備，例如支持手機上網的 WAP 技術。相似的問題舉不勝舉：網站代碼臃腫、繁雜浪費了咱們大量的帶寬；針對某種瀏覽器的 DHTML 特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士沒法瀏覽網站等等。這是一種惡性循環，是一種巨大的浪費。&#8221;
</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

 

出處：http://www.cnblogs.com/coco1s/p/3583082.html