合理使用HTML標籤進行CSS布局

css

CSS進階布局已逐漸流行，但面對所謂DIV+CSS布局的叫法讓人更為擔心，不要讓DIV成為Table的替代品，多層嵌套的DIV會嚴重影響代碼的可閱讀性，活用HTML為我們提供的標籤吧。

什麼時候應該用DIV?

雖然在這方面沒有什麼硬性的規定,但個人認為DIV更適用於大體架構的定位.例如我們要定義一塊頭部的地區,一般會這樣定義一個DIV:

<div id="header">這裡就是頭部架構裡要寫的內容</div>

當然,可以用class來定義,但一般來講如不是在同一頁面會重複的元素,用id能更好的區別開來.

本人觀察了下alistapart的首頁代碼,它的頭部定義代碼如下:

以下是引用片段：
  <ul id="navbar"> 
  <li id="articles"> 
  <a href="/articles/" title="Articles">Articles</a></li> 
  <li id="topics"> 
  <a href="/topics/" title="Topics">Topics</a></li> 
  <li id="about"> 
  <a href="/about/" title="About">About</a></li> 
  <li id="contact"> 
  <a href="/contact/" title="Contact">Contact</a></li> 
  <li id="contribute"> 
  <a href="/contribute/" title="Contribute">Contribute</a></li> 
  <li id="feed"> 
  <a href="/feed/" title="Feed">Feed</a></li> 
  </ul> 
  <h1 id="masthead"> 
  <a href="/"> 
  <img src="/UploadPic/2007-4/20074114181315.gif" alt="A LIST Apart: For People Who Make Websites" /> 
  </a> 
  </h1>
  
以下是引用片段：
<div id="ish"> 
<a href="/issues/214" title="Issue 214">No. <em>214</em></a> 
</div>

效果可訪問:ALA
定義了最上面的導航(ul部分),左邊的大logo和那個圓圓的No.xxxx的標記.

他沒有使用DIV來做頂部的架構,但卻很好的說明了這些代碼的用途,為什麼?因為他活用了HTML提供的標籤,以及樣式名稱的定義

其它最常用的布局標籤

h1

這個標籤或許真正會去用的人很少,因為它顯示的字型真的是太"大"了,但我們是CSSer,有什麼標籤樣式不能改呢?而且它所能表達的意思就如同它原先的作用一樣明顯(大標題)我想你已經知道怎麼去用它了 ^_^

ul

這個標籤很多情況是用來定義導航部分的,當然也可以用ol來代替,但瀏覽連線沒有什麼順序之分吧,所以還是用ul來的比較確切(去掉CSS後效果更明顯)

b

這個已經不再推薦使用的標籤,在布局上卻能帶來不少的方便(因為短),雖然我不是太贊成使用這個標籤,但有些時候(比如細小地方的布局定義)還是不錯的選擇

h2

h2使用最多的地方應該不是布局上,而是副標題,但有些地方需要定義欄目樣式的話,用這個標籤比較合適,欄目內容就使用p