方法B: P和B的組合
<p><b>Super Cool Page Title</b></p>
方法B使用了段落標(biāo)簽,這會(huì)讓我們得到我們想要的塊級(jí)元素的顯示效果,而<b>標(biāo)簽會(huì)讓文字呈現(xiàn)粗體的樣式(在大多數(shù)瀏覽器上) — 但是我們以這樣的方式標(biāo)記重要的標(biāo)題時(shí),仍然要面對(duì)同樣缺少語(yǔ)義性的結(jié)果.
不像方法A,<b>標(biāo)簽的存在就算缺少css樣式的定義,在大多數(shù)瀏覽器中還是會(huì)將文字以粗體的樣式呈現(xiàn).但是和<span>標(biāo)簽一樣,搜索引擎不會(huì)為段落內(nèi)的粗體文字提升關(guān)鍵字權(quán)重.
難以加上樣式
使用單純的p和b的標(biāo)簽組合,讓我們無(wú)法為這個(gè)標(biāo)題加上和其它段落有所區(qū)別的樣式,或許我們想以獨(dú)特的方式強(qiáng)調(diào)標(biāo)題,為頁(yè)面內(nèi)容加上定義和結(jié)構(gòu) — 但是使用了這個(gè)方法讓它呈現(xiàn)粗體后,我們就沒(méi)有辦法去做這些事情了.
方法C:樣式與實(shí)質(zhì)
<h1>Super Cool Page Title</h1>
哈哈,我們的好朋友標(biāo)題標(biāo)簽來(lái)了,標(biāo)題標(biāo)簽從一開(kāi)始就是存在的,但是許多網(wǎng)頁(yè)設(shè)計(jì)師還是無(wú)法以一致的方式使用它們.如果使用得當(dāng),標(biāo)題標(biāo)簽?zāi)軌蛱峁╉?yè)面內(nèi)容的錨點(diǎn),提供靈活的,可索引的,可更改樣式的結(jié)構(gòu).
從標(biāo)簽本身的觀點(diǎn)來(lái)看,你一定會(huì)愛(ài)上它的簡(jiǎn)潔,它們不需要額外的容器標(biāo)簽,你甚至能說(shuō)這個(gè)方法能比前兩個(gè)方法節(jié)省了一些字節(jié),可能可以忽略,但是每小一個(gè)字節(jié)就是改變.
<h1>到<h6>分別代表了6層標(biāo)題,從最重要的<h1>到最不重要的<h6>,他們本身就是塊級(jí)元素不需要一個(gè)額外的容器就能自成一行,簡(jiǎn)單而又有效率 — 是完成這項(xiàng)工作的最佳工具.
容易定義樣式
因?yàn)?lt;h1>標(biāo)簽擁有獨(dú)特的意義,不像<b>或者<p>標(biāo)簽?zāi)菢訒?huì)在文內(nèi)用到多次,因此我們能用css為它加上各式各樣的樣式(我們會(huì)在本章的"更多技巧"中深入討論).
更重要的是,就算不加上任何的樣式定義,標(biāo)題標(biāo)簽看起來(lái)就很明顯是個(gè)標(biāo)題!瀏覽器會(huì)用大字體,粗體字呈現(xiàn)<h1>的內(nèi)容,就算去掉頁(yè)面所有的樣式定義,仍然可以看到文檔的結(jié)構(gòu),因?yàn)檎_的標(biāo)題標(biāo)簽描述的是內(nèi)容意義,而不是表現(xiàn)方式. (圖 2-1)

圖 2 - 1: 脫離樣式后使用標(biāo)題標(biāo)簽的頁(yè)面內(nèi)容
屏幕閱讀器,PDA,移動(dòng)電話和其他一些視覺(jué)的非視覺(jué)的瀏覽器也能識(shí)別并正確處理標(biāo)題標(biāo)簽的內(nèi)容,把它的重要性突出于頁(yè)面其他內(nèi)容之上.使用<span>標(biāo)簽,不支持(或無(wú)法支持)css的瀏覽器就不會(huì)認(rèn)為它有什么特別之處.
討厭的默認(rèn)樣式
在網(wǎng)頁(yè)設(shè)計(jì)史上,設(shè)計(jì)師們都會(huì)避免使用標(biāo)題標(biāo)簽,完全是因?yàn)椴患由蠘邮降臅r(shí)候,標(biāo)題標(biāo)簽看起來(lái)就和怪物沒(méi)什么兩樣,二者擇其一,其中一部分人會(huì)因?yàn)槟J(rèn)字體大小太大而避免使用<h1>或<h2>而去使用字體大小較小的標(biāo)號(hào)較高的標(biāo)題標(biāo)簽.
然而,有個(gè)重點(diǎn)值得強(qiáng)調(diào),我們可以根據(jù)自己的喜好通過(guò)定義css輕易的改變這些標(biāo)題標(biāo)簽的樣式 — 舉例來(lái)說(shuō),<h1>未必一定是占據(jù)了半塊屏幕的龐然大物,稍后,我會(huì)示范如何簡(jiǎn)單的用css樣式來(lái)定義標(biāo)題標(biāo)簽,以此來(lái)幫助你克服對(duì)<h1>的恐懼.
對(duì)搜索引擎的友好
這是最大的優(yōu)點(diǎn).搜索引擎十分喜歡標(biāo)題標(biāo)簽,<span>標(biāo)簽或者段落中的粗體對(duì)搜索引擎來(lái)說(shuō)并沒(méi)有多大意義,使用正確的<h1>~<h6>標(biāo)記標(biāo)題花不了多少時(shí)間,但是卻能幫助搜索引擎為你的頁(yè)面建立索引,讓用戶更容易找到你的網(wǎng)頁(yè).
搜索引擎的機(jī)器人非常重視標(biāo)題標(biāo)簽中的內(nèi)容,或許,你會(huì)想要在里面堆上幾個(gè)關(guān)鍵字,在他們處理完<title>和<meta>標(biāo)簽之后,緊接著就會(huì)處理頁(yè)面內(nèi)容中的標(biāo)題標(biāo)簽,如果你的頁(yè)面上沒(méi)有使用標(biāo)題標(biāo)簽的話,那這些在你的標(biāo)題中的關(guān)鍵字不會(huì)引起他們的重視,被他們忽略.
所以,只需要花少少的時(shí)間,就能讓其他人更容易通過(guò)內(nèi)容找到你的網(wǎng)頁(yè),聽(tīng)起來(lái)不錯(cuò),對(duì)吧?
附帶一提的標(biāo)簽順序
在上面的示例中,在頁(yè)面中最重要的就是標(biāo)題,因?yàn)樗钦麄€(gè)文檔的標(biāo)題,因此,我們將使用最重要的標(biāo)題標(biāo)簽<h1>,根據(jù)W3C,有些人認(rèn)為跳過(guò)標(biāo)題層并不是什么好習(xí)慣,舉例說(shuō)明,假設(shè)我們有下面這么一份網(wǎng)頁(yè):
<h1>Super Cool Page Title</h1>
那么下一個(gè)標(biāo)題(如果不是另一個(gè)<h1>的話),就應(yīng)該是<h2>,在接下去則使用<h3>等等,你也許不會(huì)跳過(guò)某級(jí)標(biāo)題,比如說(shuō)在<h1>之后直接使用<h3>.我比較贊同,并且認(rèn)為結(jié)構(gòu)和綱要相同,應(yīng)該按照順序使用每個(gè)級(jí)層,這能讓你為已經(jīng)存在的頁(yè)面方便的添加標(biāo)題,樣式.同時(shí)這樣也比較不會(huì)出現(xiàn)用完所有標(biāo)題級(jí)層的情況.
如同先前所述,設(shè)計(jì)者可能會(huì)使用<h4>代表頁(yè)面里最重要的標(biāo)題,只因?yàn)樗念A(yù)設(shè)字體大小不如<h1>那樣大的恐怖.但是要記住,先寫(xiě)結(jié)構(gòu),再調(diào)整樣式,我們可以在任何時(shí)候根據(jù)我們自己的喜好通過(guò)css改變標(biāo)題標(biāo)簽的字體大小.

最新評(píng)論