Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

HTML設計規範[3] 選用符合資料意義的正確標籤

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

錯誤的語義結構:

?View Code HTML4STRICT

1
2
3
4
<div id="header">
<div id="title">標題</div>
<div id="content">內容內容內容內容內容內容內容內容</div>
</div>

正確的語義結構:

?View Code HTML4STRICT

1
2
3
4
<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的介面很多都有用到這樣的設計模式 (我的電腦按右鍵→內容→硬體)。

    ?View Code HTML4STRICT

    1
    2
    3
    4
    5
    
    <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>

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

參考資料:

Leave a Reply

*