|
方法B: P和B的組合
<p><b>Super Cool Page Title</b></p>
方法B使用了段落標簽,這會讓我們得到我們想要的塊級元素的顯示效果,而<b>標簽會讓文字呈現(xiàn)粗體的樣式(在大多數(shù)瀏覽器上) — 但是我們以這樣的方式標記重要的標題時,仍然要面對同樣缺少語義性的結果.
不像方法A,<b>標簽的存在就算缺少css樣式的定義,在大多數(shù)瀏覽器中還是會將文字以粗體的樣式呈現(xiàn).但是和<span>標簽一樣,搜索引擎不會為段落內的粗體文字提升關鍵字權重.
難以加上樣式
使用單純的p和b的標簽組合,讓我們無法為這個標題加上和其它段落有所區(qū)別的樣式,或許我們想以獨特的方式強調標題,為頁面內容加上定義和結構 — 但是使用了這個方法讓它呈現(xiàn)粗體后,我們就沒有辦法去做這些事情了.
方法C:樣式與實質
<h1>Super Cool Page Title</h1>
哈哈,我們的好朋友標題標簽來了,標題標簽從一開始就是存在的,但是許多網頁設計師還是無法以一致的方式使用它們.如果使用得當,標題標簽能夠提供頁面內容的錨點,提供靈活的,可索引的,可更改樣式的結構.
從標簽本身的觀點來看,你一定會愛上它的簡潔,它們不需要額外的容器標簽,你甚至能說這個方法能比前兩個方法節(jié)省了一些字節(jié),可能可以忽略,但是每小一個字節(jié)就是改變.
<h1>到<h6>分別代表了6層標題,從最重要的<h1>到最不重要的<h6>,他們本身就是塊級元素不需要一個額外的容器就能自成一行,簡單而又有效率 — 是完成這項工作的最佳工具.
容易定義樣式
因為<h1>標簽擁有獨特的意義,不像<b>或者<p>標簽那樣會在文內用到多次,因此我們能用css為它加上各式各樣的樣式(我們會在本章的"更多技巧"中深入討論).
更重要的是,就算不加上任何的樣式定義,標題標簽看起來就很明顯是個標題!瀏覽器會用大字體,粗體字呈現(xiàn)<h1>的內容,就算去掉頁面所有的樣式定義,仍然可以看到文檔的結構,因為正確的標題標簽描述的是內容意義,而不是表現(xiàn)方式. (圖 2-1)
圖 2 - 1: 脫離樣式后使用標題標簽的頁面內容
屏幕閱讀器,PDA,移動電話和其他一些視覺的非視覺的瀏覽器也能識別并正確處理標題標簽的內容,把它的重要性突出于頁面其他內容之上.使用<span>標簽,不支持(或無法支持)css的瀏覽器就不會認為它有什么特別之處.
討厭的默認樣式
在網頁設計史上,設計師們都會避免使用標題標簽,完全是因為不加上樣式的時候,標題標簽看起來就和怪物沒什么兩樣,二者擇其一,其中一部分人會因為默認字體大小太大而避免使用<h1>或<h2>而去使用字體大小較小的標號較高的標題標簽.
然而,有個重點值得強調,我們可以根據自己的喜好通過定義css輕易的改變這些標題標簽的樣式 — 舉例來說,<h1>未必一定是占據了半塊屏幕的龐然大物,稍后,我會示范如何簡單的用css樣式來定義標題標簽,以此來幫助你克服對<h1>的恐懼.
對搜索引擎的友好
這是最大的優(yōu)點.搜索引擎十分喜歡標題標簽,<span>標簽或者段落中的粗體對搜索引擎來說并沒有多大意義,使用正確的<h1>~<h6>標記標題花不了多少時間,但是卻能幫助搜索引擎為你的頁面建立索引,讓用戶更容易找到你的網頁.
搜索引擎的機器人非常重視標題標簽中的內容,或許,你會想要在里面堆上幾個關鍵字,在他們處理完<title>和<meta>標簽之后,緊接著就會處理頁面內容中的標題標簽,如果你的頁面上沒有使用標題標簽的話,那這些在你的標題中的關鍵字不會引起他們的重視,被他們忽略.
所以,只需要花少少的時間,就能讓其他人更容易通過內容找到你的網頁,聽起來不錯,對吧?
附帶一提的標簽順序
在上面的示例中,在頁面中最重要的就是標題,因為他是整個文檔的標題,因此,我們將使用最重要的標題標簽<h1>,根據W3C,有些人認為跳過標題層并不是什么好習慣,舉例說明,假設我們有下面這么一份網頁:
<h1>Super Cool Page Title</h1>
那么下一個標題(如果不是另一個<h1>的話),就應該是<h2>,在接下去則使用<h3>等等,你也許不會跳過某級標題,比如說在<h1>之后直接使用<h3>.我比較贊同,并且認為結構和綱要相同,應該按照順序使用每個級層,這能讓你為已經存在的頁面方便的添加標題,樣式.同時這樣也比較不會出現(xiàn)用完所有標題級層的情況.
如同先前所述,設計者可能會使用<h4>代表頁面里最重要的標題,只因為它的預設字體大小不如<h1>那樣大的恐怖.但是要記住,先寫結構,再調整樣式,我們可以在任何時候根據我們自己的喜好通過css改變標題標簽的字體大小.
出處：藍色理想
責任編輯：bluehearts
上一頁 標記語言——標題 [1] 下一頁 標記語言——標題 [3]
◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 標記語言——標題 [2]
