- 原文：What is the Best Way to Mark up the Title of a Document?
- 說明：本文是 《Web Standards Solutions: The Markup and Style Handbook》一書中的一章。書號：ISBN:1590593812。我們會陸續(xù)翻譯此書中有價值的章節(jié)。
- 原作者：Dan Cederholm
- 翻譯：阿宏
一個文檔標(biāo)題，最好的定義方法是什么？要回答這個問題，先設(shè)想我們要在一個頁面上定義文章的標(biāo)題，通常我們有三個方法來實現(xiàn)這個簡單目的：
方法一： 有意義嗎？
<span class=”heading”>文章標(biāo)題</span>雖然在某些情況下<span>會是一個方便的標(biāo)簽，但它并不能表達(dá)出標(biāo)題的完整含義。采用這個方法的一個好處是，我們可以對它附加一個CSS規(guī)則，分配其一個heading class，使其文字象標(biāo)題一樣顯示。
.heading {font-size: 24px;
font-weight: bold;
color: blue;
}
ok，現(xiàn)在所有的標(biāo)題都用heading class標(biāo)記成了大號的粗體字體，并且為藍(lán)色。太棒了！但是這樣做對嗎？如果有人用一個不支持CSS的瀏覽器來觀看，會怎樣呢？
舉個例子，如果我們設(shè)置的這個外部樣式表的規(guī)則不被老版本的瀏覽器支持，會怎樣？又或者有視覺障礙的人用屏幕閱讀器來閱讀這個頁面，又會怎樣？一個訪問者通過這些途徑所看到（或聽到）的應(yīng)該和這個頁面上正常的文本沒有任何區(qū)別。
盡管class=”heading”為這個標(biāo)簽增加了一點意義，但<span>仍然只是一個普通的標(biāo)簽，可以被大多數(shù)瀏覽器的缺省樣式所修改掉。
搜索引擎檢索這個頁面時會略過<span>標(biāo)簽，就好象它不存在一樣，不會對其可能包含的關(guān)鍵字給于一點額外的重視。在后面我們會更多的談到搜索引擎和標(biāo)題的關(guān)系。
最后，由于<span>標(biāo)簽是一個內(nèi)嵌元素，我們可能需要把它嵌套在一個額外的塊級元素中，比如<p>標(biāo)簽或<P>標(biāo)簽，為的是使它能夠形成單獨(dú)的行，這會進(jìn)一步被非必要的代碼弄亂你的標(biāo)簽。而這些額外增加的標(biāo)簽卻是必須的，這樣才能使不支持CSS的瀏覽器顯示出沒有差別的文本。
方法二:<p>和<b>組合
<p><b>文章標(biāo)題</b></p>使用一個段落標(biāo)簽，將會給我們帶來塊級的顯示，<b>會把文本變成粗體。但是用這個方法標(biāo)記一個重要的標(biāo)題時，我們面對的是同樣無意義的結(jié)果。
不象方法A，<b>標(biāo)簽?zāi)茉诳梢暬臑g覽器中把文字顯示成粗體――甚至在不支持CSS的瀏覽器中。但是和<span>標(biāo)簽一樣，搜索引擎也不會因為有一些東西在段落中被加粗了而給予更高的優(yōu)先。
難以設(shè)計樣式
用普通的<p>和<b>的組合，也帶來了另一個缺憾――無法把這個標(biāo)題設(shè)計成不同于其他段落的樣式。我們可能想用一個特別的樣式來突出標(biāo)題，來使頁面內(nèi)容更清晰更具結(jié)構(gòu)，但是用這個方法只能使其顯示成粗體。
方法三:樣式加實質(zhì)
<h1>文章標(biāo)題</h1>恩，多么好的標(biāo)題定義。大多數(shù)的網(wǎng)頁設(shè)計者對它都很熟悉。其實適當(dāng)?shù)氖褂盟鼈儯?lt;Hn> 就能為頁面內(nèi)容提供靈活的、可索引的、以及可樣式化的結(jié)構(gòu)。
這也是聰明的定義方法，你會發(fā)現(xiàn)它很簡單。不再需要額外的標(biāo)簽，你可以說，這僅僅比另外兩個方法節(jié)省了一點點的字節(jié)，可以忽略不計，但節(jié)省一點是一點。
<h1>一直到<h6>，代表了標(biāo)題的六個級別，從最重要的（<h1>）到最次要的（<h6>）。他們本身就是塊級的，不需要增加其它元素來使其單獨(dú)成行。簡單，有效――就是好工具。
輕松定制樣式
因為我們使用<h1>標(biāo)簽是唯一的，而<b>或<p>標(biāo)簽更適合使用在整個頁面，所以我們可以用各種各樣的CSS方法來樣式化。
更重要的是，盡管完全不用樣式，一個標(biāo)題標(biāo)簽也能明顯的表示出一個標(biāo)題！可視化的瀏覽器把 <h1>顯示成更大的粗體。一個非樣式化的頁面將以被期望的那樣顯示文檔結(jié)構(gòu)，用適當(dāng)?shù)臉?biāo)題標(biāo)簽來傳達(dá)意思。
屏幕閱讀器、PDA、手機(jī)、以及可視化的和非可視化的瀏覽器都會明白，碰到一個標(biāo)題標(biāo)簽時該做的事情，正確的處理，比頁面上的普通文本更重視的來對待。而使用<span>標(biāo)簽，那些不支持CSS的瀏覽器就不會特別的對待它。
討厭的默認(rèn)樣式
以往，由于瀏覽器默認(rèn)的缺省值非常的丑陋，設(shè)計者們也許會避免完全的使用標(biāo)題標(biāo)簽?；蛘?，因為缺省值的巨大尺寸而避免使用<h1>或<h2>，取而代之的是用更高數(shù)值的標(biāo)題標(biāo)簽來實現(xiàn)更小的尺寸。
然而，需要重點強(qiáng)調(diào)的是，我們可以很簡單的用CSS來改變這些標(biāo)題標(biāo)簽――舉個例子，一個< ;h1>并非一定是占滿大半屏幕的巨大標(biāo)版。在后面，我將證明用CSS來樣式化標(biāo)題標(biāo)簽是多么的簡單，希望可以幫助你減輕巨大的恐懼。
對搜索引擎友好的
這是一個巨大的好處。搜索引擎喜歡標(biāo)題標(biāo)簽。另一方面，一個<span>標(biāo)簽或者普通的加粗的段落標(biāo)簽卻在意味著次要一點。適當(dāng)?shù)挠?lt;h1>到<h6>標(biāo)記你的標(biāo)題，只需要你的一點點努力，然而卻讓搜索引擎更容易的檢索到你的頁面，讓人們最終能找到它們。
搜索引擎機(jī)器人會給予標(biāo)題標(biāo)簽特別的關(guān)注――這是你可能放置一些關(guān)鍵詞的地方。就象檢索到 <title>和<meta>，它們會順著標(biāo)題標(biāo)簽往頁面下面查找。如果你不使用這些標(biāo)簽，那么包含在里面的關(guān)鍵詞將不會被認(rèn)為是有價值的，從而被忽略掉。
所以只要付出一點點的努力，你就能增加人們基于頁面的內(nèi)容找到你的站點的可能性。聽上去不錯，不是嗎？
關(guān)于標(biāo)題的次序
在范例中，這個特別的標(biāo)題是頁面中最重要的，因為它是文檔的標(biāo)題。因此，我們使用最重要的標(biāo)題標(biāo)簽，<h1>。順應(yīng)W3C的規(guī)范，一些人認(rèn)為跳過數(shù)個標(biāo)題級是個不好的使用。舉個例子，想象我們在下面的頁面：
<h1>文章標(biāo)題</h1>我們接下去的標(biāo)題（如果不是用另一個<h1>重復(fù)的話）應(yīng)該是<h2>，然后是<h3 >，等等。你也許不應(yīng)該在<h1>后面跳過一級，直接跟上<h3>。我傾向于同意以上的觀點，順著行文保持級別的連續(xù)性，來構(gòu)造一個排版結(jié)構(gòu)。這樣的話，給一個已經(jīng)存在的頁面添加標(biāo)題和樣式就更容易了，你會減少因使用超出的數(shù)字而導(dǎo)致的錯誤。
前面提到的，設(shè)計者也許會用<h4>來標(biāo)簽一個頁面上最重要的標(biāo)題，僅僅是因為它的缺省的字體尺寸不象<h1>那樣令人生厭的巨大。但是記住，先結(jié)構(gòu)，后設(shè)計。我們總是能用CSS來把標(biāo)題樣式化成任何我們喜歡的文字尺寸。
