語義化你的HTML標籤和屬性

分離結構與表現的另一個重要方面是使用語義化的標記來構造文件內容。一個 XHTML 元素的存在就意味被標記內容的那部分有相應的結構化的意義，沒有理由使用其他的標記。換句話說，不要讓 CSS 使一個 HTML 元素看起來就像另一個 HTML 元素，比如用<div>來代替<p>標記標題。

首先是關於語義（Semantics）和預設樣式的區別，預設樣式是瀏覽器設定的一些常用tag的表現形式，個人認為他的主要目的就是讓大家直觀的認識標籤(markup)和屬性(attribute)的用途和作用，很明顯Hx系列看起來很像標題，因為擁有粗體和較大的字號。<strong>,<em>用來區別於其他文字，起到了強調的作用。至於列表和表格很明顯的告訴你他們是做什麼的。

其次，語義化的網頁的好處，最主要的就是對搜尋引擎友好，又了良好的結構和語義你的網頁內容自然容易被搜尋引擎抓取，你網站的推廣便可以省下不少的功夫。

<Hx>

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作為標題使用，並且依據重要性遞減。<h1>是最高的等級。例如:

<h1>文件標題</h1>
<h2>次級標題</h2>

而不要使用<div class="title">文件標題</div>，或者<span class="title">文件標題</span>.很明顯搜尋引擎對於後者是不會認為他是標題的。

<p>

段落標記，知道了<p>作為段落，你就不會再使用<br/>來換行了，而且不需要<br/><br/>來區分段落與段落。<p></p>中的文字會自動換行，而且換行的效果優於<br>。段落與段落之間的空隙也可以利用CSS來控制，很容易而且清晰的區分出段落與段落。在利用行高(line-height)很容易的定義出行間距，再定義首字下沉等效果，那就挺完美了。例如：

<p>Admin10000.com 是WEB開發者學習交流的網站,這裡提供大量實用的技術文件及相關資源下載，是網頁設計、網路程式設計人員及其愛好者必備網站。</p>
<p>希望大家能在這裡學到WEB開發知識，啟發靈感，提高自己的WEB開發水平。</p>

<ul>、<ol>、<li>

<ul>無序列表，很常見的到了大家廣泛的使用，<ol>有序列表也挺常用。在web標準化過程中，<ul>還被更多的用於導航條，本來導航條就是個列表，這樣做是完全正確的，而且當你的瀏覽器不支援CSS的時候，導航連結仍然很好使，就是美觀方面差了一點。例如：

<ul>
    <li>專案一</li>
    <li>專案二</li>
    <li>專案三</li>
</ul>

<ol>
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
</ol>

<dl>、<dt>、<dd>

dl就是“定義列表”。比如說詞典裡面的詞的解釋、定義就可以用這種列表。例如：

<dl>
<dt>Dog</dt>
<dd>A carnivorous mammal of the family Canidae.</dd>
</dl> 

<dl>
    <dt>上海灘</dt>
    <dd>這部拍攝於1980年的《上海灘》堪稱是香港電視史上最成功、最經典的劇集。
    當年在香港播出以後，產生了巨大的轟動效應。</dd>
    <dt>周潤發</dt>
    <dd>和所有偉大的影星一樣，周潤發印證了一個時代，一個香港電影的黃金時代。
風衣墨鏡、冷血雙槍、陽光微笑，都封存膠片之中，當我們回首尋望的時候，發哥已被刻為一個時代的座標。</dd>
</dl>

<cite>、cite 、<q>、 <blockquote>

論壇和blog經常會用到引用別人的話，用<q>來標記簡短的單行引用。Web瀏覽器會自動識別在<q> 之間的內容。不幸的是，IE不能識別，並且有些時候， <q>會引起一些可訪問性(Accessibility)的問題。正因為如此，一些人建議儘量不要使用 <q>,手動的插入引用標記。在一個包含適當的類的 <span>中加入單行的引用內容，那麼就可以用CSS來給引用設計樣式了，但是這個沒有語義上的意義。 您可以讀讀Mark Pilgrim寫的The Q tag  (http://diveintomark.org/archives/2002/05/04/the_q_tag )關於處理<q>相關問題的看法。對於那些一段或者好幾段的長篇引用，就應當使用 <blockquote>了。CSS可以用來定義引用的樣式。注意，一段文章是不可以直接放在<blockquote>中的，引用的內容還必須包含在一個元素中，通常是<p>。屬性cite既可以與<q> 一起用，也可以與<blockquote>一起用，用來提供引用內容的來源地址。需要注意的是，如果你使用 <span>來代替 <q>標記引用內容,那麼你就不能使用 cite屬性了。例如:

<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.

<p> <cite>孔子</cite>曰：<q>學而不思則罔，思而不學則殆</q>.</p>

<p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/
struct/text.html#h-9.2.1">The presentation of phrase elements
depends on the user agent.</q>.</p>

<blockquote cite="http://www.w3cn.org/">
    <p>“我們大部分人都有深刻體驗，每當主流瀏覽器版本的升級，我們剛建立的網站就可能變得過時，我們就需要升級或者重新建造一遍網站。例如1996-1999年典型的"瀏覽器大戰"，為了相容 Netscape 和 IE，網站不得不為這兩種瀏覽器寫不同的程式碼。同樣的，每當新的網路技術和互動裝置的出現，我們也需要製作一個新版本來支援這種新技術或新裝置，例如支援手機上網的 WAP 技術。類似的問題舉不勝舉：網站程式碼臃腫、繁雜浪費了我們大量的頻寬；針對某種瀏覽器的 DHTML 特效，遮蔽了部分潛在的客戶；不易用的程式碼，殘障人士無法瀏覽網站等等。這是一種惡性迴圈，是一種巨大的浪費。”</p>
</blockquote>

<em>、 <strong>

<em> 是用作強調的，<strong>是用作重點強調的。 大部分瀏覽器用斜體顯示強調的內容，用粗體來顯示重點強調的內容，然而，這是沒有必要的，如果是為了確定強調內容的顯示方式，最好的方法就是使用CSS來定義他們的表現。當你想要的只是視覺上的效果時，就不要使用強調了。而且如果你想要強調但是還覺得粗體或者斜體不視覺效果沒那麼好，特別是斜體對於中文來說，那麼你完全可以定義一些其他的比較醒目的樣式達到強調的效果。例如:

<p><em>強調</em> 的文字通常用斜體顯示，
然而，<strong>特別強調</strong> 的文字通常以粗體顯示。</p>

<table>、<td>、<th>、< caption >、 summary

XHTML中的表格不應用來佈局。然而如果是為了標記列表的資料，就應該使用表格了。<th>為表格標題，屬性summar為摘要，<caption>標籤為首部說明，<thead>標籤為表格頭部，<tbody>標籤為表格主體內容，<tfoot>標籤為表格尾部。
其中還可以使用scope 可用於取代headers屬性，標記含有表頭資訊的單元格，其中各數值的內容如下：
　row 指示當前單元格，為包含當前單元格的行提供相關的表頭資訊。
　col 指示當前單元格，為根據當前單元格指定的列提供相應的表頭資訊。
　rowgroup 指示當前單元格，為包含當前單元格的其餘行組提供相關的表頭資訊。
　colgroup 指示當前單元格，為根據當前單元格指定的其餘列組提供相應的表頭資訊。
abbr 用於定義表頭單元格中的縮寫名，如果沒有定義該屬性，則將預設單元格內容為節略形式。
例如:

<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
<caption>Table 1: Power Mac G5 tech specs </caption>
  <tr>
    <th scope="col" abbr="Configurations" class="nobg">Configurations</th>

    <th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
    <th scope="col" abbr="Dual 2">Dual 2GHz</th>
        <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
  </tr>
  <tr>
    <th scope="row" abbr="Model" class="spec">Model</th>
    <td>M9454LL/A</td>

    <td>M9455LL/A</td>
    <td>M9457LL/A</td>
  </tr>
  <tr>
    <th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th>
    <td class="alt">Dual 1.8GHz PowerPC G5</td>
    <td class="alt">Dual 2GHz PowerPC G5</td>

    <td class="alt">Dual 2.5GHz PowerPC G5</td>
  </tr>
  <tr>
    <th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th>
    <td>900MHz per processor</td>
    <td>1GHz per processor</td>
    <td>1.25GHz per processor</td>

  </tr>
  <tr>
    <th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>
    <td class="alt">512K per processor</td>
    <td class="alt">512K per processor</td>
    <td class="alt">512K per processor</td>
  </tr>

</table>

<dfn>

<p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p>

 

<ins>, <del>

知道del，就不要再用<s>做刪除線了，用del顯然更具有語義化。而且del還帶有cite和datetime來表明刪除的原因以及刪除的時間。ins是表示插入，也有這樣的屬性。例如：

<p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p>

<code>

表示是計算機程式碼。而預設樣式為打字型。技術論壇和blog中經常遇到。例如：

<abbr>、<acronym>

<abbr>標籤是表示web頁面上的簡稱，<acronym>標籤為取首字母縮寫。（注：這裡把簡稱和縮寫分開而論，簡稱範圍比縮寫大，取首字母的縮寫用<acronym>標籤）Windows的IE6.0以下的瀏覽器暫不支援<abbr>標籤。 在IE裡，你可以應用CSS給<acronym>但是不能應用給<abbr>標籤，IE會為<acronym>標籤的title屬性顯示提示，但是會忽略<abbr>標籤。
解決方法見: http://www.w3cn.org/article/translate/2005/115.html
例如:

<abbr title="Cascading Style Sheets">CSS</abbr>

<acronym title="Cascading Style Sheets">CSS</acronym >

alt屬性和title屬性

title屬性用來為元素提供額外說明資訊title屬性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標籤。但是並不是必須的。
alt屬性為不能顯示影象、窗體或applets的使用者代理（UA），指定替換文字。替換文字的語言由lang屬性指定。
 

<img src="/img/common/logo.gif" width="90" height="27" alt="bluediea.com">

<a href="http://www.jluvip.com/blog/article.asp?id=260" title="js獲取單選按鈕的資料">js獲取單選按鈕的資料</a>

 

參考資料:
預設樣式：
http://www.w3cn.org/article/tips/2005/116.html
http://www.w3.org/TR/CSS21/sample.html
語義化:
http://www.456bereastreet.com/lab/developing_with_web_standards/zh
http://www.456bereastreet.com/lab/developing_with_web_standards
http://www.w3cn.org/article/translate/2005/114.html
http://www.w3cn.org/article/translate/2005/114.html
http://www.junchenwu.com/2005/11/html_tags.html
http://brainstormsandraves.com/articles/semantics/structure/
http://www.w3.org/TR/html401/struct/text.htm
http://www.simplebits.com/bits/simplequiz/

資源連結：
Bad Tags：
http://www.htmldog.com/guides/htmlintermediate/badtags/
The Q tag
http://diveintomark.org/archives/2002/05/04/the_q_tag
HTML, XHTML, semantics and the future of the web
http://www.westciv.com/style_master/house/good_oil/xhtml/index.html

相關文件：10個最容易犯的HTML標籤錯誤