定義標題的最好方法_CSS/HTML

作者：阿宏 2005-4-15 20:45:18
原文：What is the Best Way to Mark up the Title of a Document?
說明：本文是 《Web Standards Solutions: The Markup and Style Handbook》一書中的一章。書號：ISBN:1590593812。我們會陸續翻譯此書中有價值的章節。
原作者：Dan Cederholm
翻譯：阿宏
一個文檔標題，最好的定義方法是什嗎？要回答這個問題，先設想我們要在一個頁面上定義文章的標題，通常我們有三個方法來實現這個簡單目的：

方法一： 有意義嗎？
文章標題
雖然在某些情況下會是一個方便的標籤，但它並不能表達出標題的完整含義。採用這個方法的一個好處是，我們可以對它附加一個CSS規則，分配其一個heading class，使其文字象標題一樣顯示。

.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}
ok，現在所有的標題都用heading class標記成了大號的粗體字型，並且為藍色。太棒了！但是這樣做對嗎？如果有人用一個不支援CSS的瀏覽器來觀看，會怎樣呢？

舉個例子，如果我們設定的這個外部樣式表的規則不被老版本的瀏覽器支援，會怎樣？又或者有視覺障礙的人用螢幕助讀程式來閱讀這個頁面，又會怎樣？一個訪問者通過這些途徑所看到（或聽到）的應該和這個頁面上正常的文本沒有任何區別。

儘管class="heading"為這個標籤增加了一點意義，但仍然只是一個普通的標籤，可以被大多數瀏覽器的預設樣式所修改掉。

搜尋引擎檢索這個頁面時會略過標籤，就好象它不存在一樣，不會對其可能包含的關鍵字給於一點額外的重視。在後面我們會更多的談到搜尋引擎和標題的關係。

最後，由於標籤是一個內嵌元素，我們可能需要把它嵌套在一個額外的區塊層級元素中，比如

標籤或標籤，為的是使它能夠形成單獨的行，這會進一步被非必要的代碼弄亂你的標籤。而這些額外增加的標籤卻是必須的，這樣才能使不支援CSS的瀏覽器顯示出沒有差別的文本。

方法二:

和組合

文章標題

使用一個段落標籤，將會給我們帶來塊級的顯示，會把文本變成粗體。但是用這個方法標記一個重要的標題時，我們面對的是同樣無意義的結果。

不象方法A，標籤能在可視化的瀏覽器中把文字顯示成粗體——甚至在不支援CSS的瀏覽器中。但是和標籤一樣，搜尋引擎也不會因為有一些東西在段落中被加粗了而給予更高的優先。

難以設計樣式

用普通的

和的組合，也帶來了另一個缺憾——無法把這個標題設計成不同於其他段落的樣式。我們可能想用一個特別的樣式來突出標題，來使頁面內容更清晰更具結構，但是用這個方法只能使其顯示成粗體。

方法三:樣式加實質

文章標題

恩，多麼好的標題定義。大多數的網頁設計者對它都很熟悉。其實適當的使用它們， 就能為頁面內容提供靈活的、可索引的、以及可樣式化的結構。

這也是聰明的定義方法，你會發現它很簡單。不再需要額外的標籤，你可以說，這僅僅比另外兩個方法節省了一點點的位元組，可以忽略不計，但節省一點是一點。

一直到

，代表了標題的六個層級，從最重要的（

）到最次要的（

）。他們本身就是塊級的，不需要增加其它元素來使其單獨成行。簡單，有效——就是好工具。

輕鬆定製樣式

因為我們使用

標籤是唯一的，而或

標籤更適合使用在整個頁面，所以我們可以用各種各樣的CSS方法來樣式化。

更重要的是，儘管完全不用樣式，一個標題標籤也能明顯的表示出一個標題！可視化的瀏覽器把

顯示成更大的粗體。一個非樣式化的頁面將以被期望的那樣顯示文檔結構，用適當的標題標籤來傳達意思。

螢幕助讀程式、PDA、手機、以及可視化的和非可視化的瀏覽器都會明白，碰到一個標題標籤時該做的事情，正確的處理，比頁面上的普通文本更重視的來對待。而使用標籤，那些不支援CSS的瀏覽器就不會特別的對待它。

討厭的預設樣式

以往，由於瀏覽器預設的預設值非常的醜陋，設計者們也許會避免完全的使用標題標籤。或者，因為預設值的巨大尺寸而避免使用

或

，取而代之的是用更高數值的標題標籤來實現更小的尺寸。

然而，需要重點強調的是，我們可以很簡單的用CSS來改變這些標題標籤——舉個例子，一個< ;h1>並非一定是佔滿大半螢幕的巨大標版。在後面，我將證明用CSS來樣式化標題標籤是多麼的簡單，希望可以協助你減輕巨大的恐懼。

對搜尋引擎友好的

這是一個巨大的好處。搜尋引擎喜歡標題標籤。另一方面，一個標籤或者普通的加粗的段落標籤卻在意味著次要一點。適當的用

到

標記你的標題，只需要你的一點點努力，然而卻讓搜尋引擎更容易的檢索到你的頁面，讓人們最終能找到它們。

搜尋引擎機器人會給予標題標籤特別的關注——這是你可能放置一些關鍵詞的地方。就象檢索到 和，它們會順著標題標籤往頁面下面尋找。如果你不使用這些標籤，那麼包含在裡面的關鍵詞將不會被認為是有價值的，從而被忽略掉。

所以只要付出一點點的努力，你就能增加人們基於頁面的內容找到你的網站的可能性。聽上去不錯，不是嗎？

關於標題的次序
在範例中，這個特別的標題是頁面中最重要的，因為它是文檔的標題。因此，我們使用最重要的標題標籤，

。順應W3C的規範，一些人認為跳過數個標題級是個不好的使用。舉個例子，想象我們在下面的頁面：

文章標題

我們接下去的標題（如果不是用另一個

重複的話）應該是

，然後是

，等等。你也許不應該在

後面跳過一級，直接跟上

。我傾向於同意以上的觀點，順著行文保持層級的連續性，來構造一個排版結構。這樣的話，給一個已經存在的頁面添加標題和樣式就更容易了，你會減少因使用超出的數字而導致的錯誤。

前面提到的，設計者也許會用

來標籤一個頁面上最重要的標題，僅僅是因為它的預設的字型尺寸不象

那樣令人生厭的巨大。但是記住，先結構，後設計。我們總是能用CSS來把標題樣式化成任何我們喜歡的文字尺寸。

