文檔標(biāo)題是文檔的最主要的組成部分，也是搜索引擎蜘蛛爬行時(shí)最關(guān)注的內(nèi)容，該如何定義標(biāo)題呢？要回答這個(gè)問題，先設(shè)想我們要在一個(gè)頁(yè)面上定義文章的標(biāo)題，通常我們有三個(gè)方法來實(shí)現(xiàn)這個(gè)簡(jiǎn)單目的：

　　A、沒有語義的標(biāo)題定義：


　　雖然在某些情況下<span>會(huì)是一個(gè)方便的標(biāo)簽，但它并不能表達(dá)出標(biāo)題的完整含義。采用這個(gè)方法的一個(gè)好處是，我們可以對(duì)它附加一個(gè)CSS規(guī)則，使其文字象標(biāo)題一樣顯示。


　　現(xiàn)在所有的標(biāo)題都用heading class標(biāo)記成了大號(hào)的粗體字體，并且為紅色。但是這樣做對(duì)嗎？假如有人用一個(gè)不支持CSS的瀏覽器來觀看，會(huì)是什么樣的狀況呢？

　　盡管class="heading"為這個(gè)標(biāo)簽增加了一點(diǎn)意義，但<span>仍然只是一個(gè)普通的標(biāo)簽，可以被大多數(shù)瀏覽器的缺省樣式所修改掉。

　　搜索引擎檢索這個(gè)頁(yè)面時(shí)會(huì)略過<span>標(biāo)簽，就好象它不存在一樣，不會(huì)對(duì)其可能包含的要害字給于一點(diǎn)額外的重視。在后面我們會(huì)更多的談到搜索引擎和標(biāo)題的關(guān)系。

　　最后，由于<span>標(biāo)簽是一個(gè)內(nèi)嵌元素，我們可能需要把它嵌套在一個(gè)額外的塊級(jí)元素中，比如<p>標(biāo)簽或<div>標(biāo)簽，為的是使它能夠形成單獨(dú)的行，這會(huì)進(jìn)一步被非必要的代碼弄亂你的標(biāo)簽。而這些額外增加的標(biāo)簽卻是必須的，這樣才能使不支持CSS的瀏覽器顯示出沒有差別的文本。

　　B、無助的<p>和<b>組合

　　<p><b>文章標(biāo)題</b></p>
　　使用一個(gè)段落標(biāo)簽，將會(huì)給我們帶來塊級(jí)的顯示，<b>會(huì)把文本變成粗體。但是用這個(gè)方法標(biāo)記一個(gè)重要的標(biāo)題時(shí)，我們面對(duì)的是同樣無意義的結(jié)果。

　　不象方法A，<b>標(biāo)簽?zāi)茉诳梢暬�的瀏覽器中把文字顯示成粗體——甚至在不支持CSS的瀏覽器中。但是和<span>標(biāo)簽一樣，搜索引擎也不會(huì)因?yàn)橛幸恍〇|西在段落中被加粗了而給予更高的優(yōu)先。

　　難以設(shè)計(jì)樣式

　　用普通的<p>和<b>的組合，也帶來了另一個(gè)缺憾——無法把這個(gè)標(biāo)題設(shè)計(jì)成不同于其他段落的樣式。我們可能想用一個(gè)非凡的樣式來突出標(biāo)題，來使頁(yè)面內(nèi)容更清楚更具結(jié)構(gòu)，但是用這個(gè)方法只能使其顯示成粗體。

　　C、樣式加實(shí)質(zhì)

　　<h1>文章標(biāo)題</h1>
　　恩，多么好的標(biāo)題定義。大多數(shù)的網(wǎng)頁(yè)設(shè)計(jì)者對(duì)它都很熟悉。其實(shí)適當(dāng)?shù)氖褂盟鼈儯?lt;Hn> 就能為頁(yè)面內(nèi)容提供靈活的、可索引的、以及可樣式化的結(jié)構(gòu)。

　　這也是聰明的定義方法，你會(huì)發(fā)現(xiàn)它很簡(jiǎn)單。不再需要額外的標(biāo)簽，你可以說，這僅僅比另外兩個(gè)方法節(jié)省了一點(diǎn)點(diǎn)的字節(jié)，可以忽略不計(jì)，但節(jié)省一點(diǎn)是一點(diǎn)。

　　<h1>一直到<h6>，代表了標(biāo)題的六個(gè)級(jí)別，從最重要的（<h1>）到最次要的（<h6>）。他們本身就是塊級(jí)的，不需要增加其它元素來使其單獨(dú)成行。簡(jiǎn)單，有效——就是好工具。

　　為標(biāo)題輕松定制樣式

　　因?yàn)槲覀兪褂?lt;h1>標(biāo)簽是唯一的，而<b>或<p>標(biāo)簽更適合使用在整個(gè)頁(yè)面，所以我們可以用各種各樣的CSS方法來樣式化。

　　更重要的是，盡管完全不用樣式，一個(gè)標(biāo)題標(biāo)簽也能明顯的表示出一個(gè)標(biāo)題！可視化的瀏覽器把 <h1>顯示成更大的粗體。一個(gè)非樣式化的頁(yè)面將以被期望的那樣顯示文檔結(jié)構(gòu)，用適當(dāng)?shù)臉?biāo)題標(biāo)簽來傳達(dá)意思。

　　屏幕閱讀器、PDA、手機(jī)、以及可視化的和非可視化的瀏覽器都會(huì)明白，碰到一個(gè)標(biāo)題標(biāo)簽時(shí)該做的事情，正確的處理，比頁(yè)面上的普通文本更重視的來對(duì)待。而使用<span>標(biāo)簽，那些不支持CSS的瀏覽器就不會(huì)非凡的對(duì)待它。

　　討厭的默認(rèn)樣式

　　以往，由于瀏覽器默認(rèn)的缺省值非常的丑陋，設(shè)計(jì)者們也許會(huì)避免完全的使用標(biāo)題標(biāo)簽�；蛘�，因?yàn)槿笔≈档木薮蟪叽缍�避免使�?lt;h1>或<h2>，取而代之的是用更高數(shù)值的標(biāo)題標(biāo)簽來實(shí)現(xiàn)更小的尺寸。

　　然而，需要重點(diǎn)強(qiáng)調(diào)的是，我們可以很簡(jiǎn)單的用CSS來改變這些標(biāo)題標(biāo)簽——舉個(gè)例子，一個(gè)<;h1>并非一定是占滿大半屏幕的巨大標(biāo)版。在后面，我將證實(shí)用CSS來樣式化標(biāo)題標(biāo)簽是多么的簡(jiǎn)單，希望可以幫助你減輕巨大的懼怕。

　　對(duì)搜索引擎的友好

　　這是一個(gè)巨大的好處。搜索引擎喜歡標(biāo)題標(biāo)簽。另一方面，一個(gè)<span>標(biāo)簽或者普通的加粗的段落標(biāo)簽卻在意味著次要一點(diǎn)。適當(dāng)?shù)挠?lt;h1>到<h6>標(biāo)記你的標(biāo)題，只需要你的一點(diǎn)點(diǎn)努力，然而卻讓搜索引擎更輕易的檢索到你的頁(yè)面，讓人們最終能找到它們。

　　搜索引擎機(jī)器人會(huì)給予標(biāo)題標(biāo)簽非凡的關(guān)注——這是你可能放置一些要害詞的地方。就象檢索到 <title>和<meta>，它們會(huì)順著標(biāo)題標(biāo)簽往頁(yè)面下面查找。假如你不使用這些標(biāo)簽，那么包含在里面的要害詞將不會(huì)被認(rèn)為是有價(jià)值的，從而被忽略掉。

　　所以只要付出一點(diǎn)點(diǎn)的努力，你就能增加人們基于頁(yè)面的內(nèi)容找到你的站點(diǎn)的可能性。聽上去不錯(cuò)，不是嗎？

　　關(guān)于標(biāo)題的次序

　　在范例中，這個(gè)非凡的標(biāo)題是頁(yè)面中最重要的，因?yàn)樗�是文檔的標(biāo)題。因此，我們使用最重要的標(biāo)題標(biāo)簽，<h1>。順應(yīng)W3C的規(guī)范，一些人認(rèn)為跳過數(shù)個(gè)標(biāo)題級(jí)是個(gè)不好的使用。舉個(gè)例子，想象我們?cè)谙旅娴捻?yè)面：

　　<h1>文章標(biāo)題</h1>
　　我們接下去的標(biāo)題（假如不是用另一個(gè)<h1>重復(fù)的話）應(yīng)該是<h2>，然后是<h3 >，等等。你也許不應(yīng)該在<h1>后面跳過一級(jí)，直接跟上<h3>。我傾向于同意以上的觀點(diǎn)，順著行文保持級(jí)別的連續(xù)性，來構(gòu)造一個(gè)排版結(jié)構(gòu)。這樣的話，給一個(gè)已經(jīng)存在的頁(yè)面添加標(biāo)題和樣式就更輕易了，你會(huì)減少因使用超出的數(shù)字而導(dǎo)致的錯(cuò)誤。

　　前面提到的，設(shè)計(jì)者也許會(huì)用<h4>來標(biāo)簽一個(gè)頁(yè)面上最重要的標(biāo)題，僅僅是因?yàn)樗�的缺省的字體尺寸不象<h1>那樣令人生厭的巨大。但是記住，先結(jié)構(gòu)，后設(shè)計(jì)。我們總是能用CSS來把標(biāo)題樣式化成任何我們喜歡的文字尺寸。

　　簡(jiǎn)單的樣式

　　使用CSS，最輕易做的事情就是給我們的標(biāo)題設(shè)置不同的字體樣式。我們可以建立一個(gè)CSS規(guī)則，它將把樣式應(yīng)用到頁(yè)面中出現(xiàn)的所有<h1>標(biāo)簽（或者是整個(gè)站點(diǎn)，當(dāng)使用一個(gè)外部樣式表的時(shí)候）。隨后，假如我們想要改變整個(gè)站點(diǎn)上所有出現(xiàn)<h1>標(biāo)簽的地方的顏色、尺寸、字體的話，我們所有需要做的事情就是修改一些CSS規(guī)則，然后它們將立即改變。聽上去非常誘惑人，不是嗎？

　　讓我們熟悉一下我們自己的超級(jí)酷的標(biāo)題：


　　用CSS改變顏色、字體和尺寸：


　　頁(yè)面上所有找到<h1>的地方都將應(yīng)用Arial字體（或者是缺省的sans-serif字體）、24點(diǎn)大小以及紅色。我們可以給文字加上邊框，或者讓h1的區(qū)域有一定圖案的背景。這些美化的工作，你全都可以通過CSS來完成。是不是更方便，更有語義，更加的友好。