如何定義標題最恰當符合Web標準？_Div+CSS教程

　　
　　文檔標題是文檔的最主要的組成部分，也是搜索引擎蜘蛛爬行時最關注的內容，該如何定義標題呢？要回答這個問題，先設想我們要在一個頁面上定義文章的標題，通常我們有三個方法來實現這個簡單目的：

　　A、沒有語義的標題定義：


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


　　現在所有的標題都用heading class標記成了大號的粗體字體，并且為紅色。但是這樣做對嗎？假如有人用一個不支持CSS的瀏覽器來觀看，會是什么樣的狀況呢？

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

　　搜索引擎檢索這個頁面時會略過<span>標簽，就好象它不存在一樣，不會對其可能包含的要害字給于一點額外的重視。在后面我們會更多的談到搜索引擎和標題的關系。

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

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

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

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

　　難以設計樣式

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

　　C、樣式加實質

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

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

　　<h1>一直到<h6>，代表了標題的六個級別，從最重要的（<h1>）到最次要的（<h6>）。他們本身就是塊級的，不需要增加其它元素來使其單獨成行。簡單，有效——就是好工具。

　　為標題輕松定制樣式

　　因為我們使用<h1>標簽是唯一的，而<b>或<p>標簽更適合使用在整個頁面，所以我們可以用各種各樣的CSS方法來樣式化。

　　更重要的是，盡管完全不用樣式，一個標題標簽也能明顯的表示出一個標題！可視化的瀏覽器把 <h1>顯示成更大的粗體。一個非樣式化的頁面將以被期望的那樣顯示文檔結構，用適當的標題標簽來傳達意思。

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

　　討厭的默認樣式

　　以往，由于瀏覽器默認的缺省值非常的丑陋，設計者們也許會避免完全的使用標題標簽。或者，因為缺省值的巨大尺寸而避免使用<h1>或<h2>，取而代之的是用更高數值的標題標簽來實現更小的尺寸。

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

　　對搜索引擎的友好

　　這是一個巨大的好處。搜索引擎喜歡標題標簽。另一方面，一個<span>標簽或者普通的加粗的段落標簽卻在意味著次要一點。適當的用<h1>到<h6>標記你的標題，只需要你的一點點努力，然而卻讓搜索引擎更輕易的檢索到你的頁面，讓人們最終能找到它們。

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

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

　　關于標題的次序

　　在范例中，這個非凡的標題是頁面中最重要的，因為它是文檔的標題。因此，我們使用最重要的標題標簽，<h1>。順應W3C的規范，一些人認為跳過數個標題級是個不好的使用。舉個例子，想象我們在下面的頁面：

　　<h1>文章標題</h1>
　　我們接下去的標題（假如不是用另一個<h1>重復的話）應該是<h2>，然后是<h3 >，等等。你也許不應該在<h1>后面跳過一級，直接跟上<h3>。我傾向于同意以上的觀點，順著行文保持級別的連續性，來構造一個排版結構。這樣的話，給一個已經存在的頁面添加標題和樣式就更輕易了，你會減少因使用超出的數字而導致的錯誤。

　　前面提到的，設計者也許會用<h4>來標簽一個頁面上最重要的標題，僅僅是因為它的缺省的字體尺寸不象<h1>那樣令人生厭的巨大。但是記住，先結構，后設計。我們總是能用CSS來把標題樣式化成任何我們喜歡的文字尺寸。

　　簡單的樣式

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

　　讓我們熟悉一下我們自己的超級酷的標題：


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


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