在學會CSS Layout前，要先瞭解CSS Layout並不是單純只是用<div>把所有內容包起來，再用CSS做樣式，就是CSS Layout，而是要對XHTML的標籤有一定的瞭解，這樣才能寫出正確的結構。

錯誤的語義結構：

<div id="header">
<div id="title">標題</div>
<div id="content">內容內容內容內容內容內容內容內容</div>
</div>

正確的語義結構：

<div id="header">
<h3>標題</h3>
<p>內容內容內容內容內容內容內容內容</p>
</div>

 以下就網頁中常碰到的五大元素類型來介紹XHTML的標籤：

• 標題

  標題標籤總共有6個：<h1>~<h6>，預設都是粗體字，字級由<h1>逐次向<h6>縮小。以我們的寫作風格，一頁只會有一個<h1>，但是<h2>~<h6>同一頁面可以同時用很多次，以文章頁來講，文章的主標題就會以<h1>當結構，副標題則以<h2>當結構，其他區塊的標題就用<h3>~<h6>當結構。若頁面沒有很明顯的主標，則<h1>是可以省略的。我們在實作上header、sidebar、footer等共用區塊，都以<h3>做為區塊的起始階層，即使在畫面呈現上並沒有明顯的標題，我們也會在結構中加上這個標籤，以強化該區塊的語義及識別，這部份只要利用CSS讓它不呈現即可，而這樣做也有助於SEO的優化。

• 內文

  文章內文都以<p></p>做段落的起始，段落當中如果有需要做不一樣的樣式，則需視語義來決定要用哪個標籤。如果是強調用的，就用<em>、<strong>這兩組標籤。<em>在瀏覽器的樣式預設都是斜體字，<strong>在瀏覽器的預設樣式是粗體字，但是千萬不要一遇到斜體字就用<em>、粗體字就用<strong>，樣式部份還是要交由CSS處理，而這兩個標籤雖然都是強調時使用，不過<strong>是比<em>在語氣上，還要來得強烈一點。

  其他文章裡很常用到的引言、作者、日期…等等，則可以利用blockquote(cite)「區塊引言」、q(cite)「行內引言」、cite「引用自…」、ins(cite、datetime)「增加的內容」、del「刪除的內容」等標籤及屬性。blockquote和q都可以拿來做為引言的結構，cite是他們的屬性，是用來標示這段引言的由來。這兩個tag不同的地方是blockquote是用在比較長的區塊式引言，而且裡面必需先放一個區塊組件像是p，不能直接只放資料內容本身；q則是用在比較短的行內式引言，可以直接夾住某一段引言的內容。

• 清單

  清單分為有序清單<ol>和無序清單<ul>，<ol>的預設樣式是數字的1、2、3，<ul>的預設樣式是黑色實心圓點。所以如果是有清楚的順序的就用<ol>，像crumb或排行榜就適合用<ol>，其餘都可以用<ul>表示。

  另外還有一組<dl><dt><dd>是定義式清單，這一組清單的寫法類似於table，是由三個標籤組成<dl><dt><dd>，先用<dl>宣告這是一個定義清單，<dt>是定義清單裡的標題，而<dd>則是用來描述<dt>的標籤，一個dl可以包含多組dt及dd，而一個dt也可以對應多組dd，這樣的結構可用來描述一段QA、或一本書籍資料或一張唱片CD的介紹、或者一段名詞或規格的定義等等。但要注意dt內，只能放置inline型的標籤，詳見標籤巢狀嵌套規則。

• 表格

  雖然CSS Layout是要把Table Layout轉變成由div等結構語義化的呈現方式，但是該用表格的時候，還是應該要用Table來呈現，但是以前會放在Table的樣式要通通抽離到CSS裡面，Table所會用到的屬性只有summary、class等語義結構而已。Table也不是只有<tr>、<td>可以用，為了結構語義化我們可以充份利用caption、thead、tfoot、tbody、th、col、colgroup這些標籤，其中的caption就像是這個Table的標題，thead、tbody、tfoot就像是一個區塊的header、content、footer，但如果沒有明確的區塊需求的話，這些tag也是可以被省略的。使用時要注意標籤出現的順序thead→tfoot→tbody，tfoot必須在tbody之前。

• 表單

  表單雖然是一連串的輸入欄位和按鈕，但是為了做到更友善的介面我們會利用一些tag來達成這樣的目的，像是利用label for這個屬性就可以讓點選的範圍加大，而label這個tag不單單只能包住文字，也能包住input組件本身，所以可以視設計需求，而有彈性的操控這個tag。

  表單雖然只有form有必要屬性action，但是在每一個文字輸入欄位(type為text)我們都會盡量加上一個maxlengh屬性，這是設定使用者能夠輸入或貼入文字方塊控制項中的最大字元數，這也是一個最基本限制使用者輸入資料的檢查。

  如果在表單內分了2個以上的區塊，那麼<fieldset>和<legend>就是你絕佳的選擇，先用<fieldset>定出區塊，再拿<legend>來做標題的處理。而這樣的介面其實大家平常就很常看到了，windows的介面很多都有用到這樣的設計模式 (我的電腦按右鍵→內容→硬體)。

  <label for="name">姓名：</label>
  <input type="text" name="name" id="name" maxlength="100" value="" />
  
  <label>姓名：
  <input type="text" name="name" id="name" maxlength="100" value="" /></label> 

  以上兩個例子是有同樣的效果的

參考資料：

• HTML 4.01 / XHTML 1.0 Reference