網頁設計　html教程　欄目．

上文：標記語言——表單

原文出處

chapter 6 <strong>,<em>與其他短語元素

在引言和前面的章節中,已經稍微提到過語義標簽的概念,使用標簽為文件標識意義,而不是單純的以標簽設定顯示效果.設計完全使用語義標簽的網頁是個不錯的點子.然而我覺得這個目標太理想化了.當然,沒有完全達到目標并不代表努力過程毫無價值.至少朝著這個目標努力很有價值.

在現實情況下,經常有必要加上非語義標簽,以便實現特定的設計目標,主要是因為現在著名的瀏覽器都無法百分之百支持標準的緣故.有些css規則在部分瀏覽器中無法顯示正確的效果,而這不幸的讓我們在達成某些設計目標的過程中必須使用額外的標簽.

有個重要的概念必須放在心上:那就是盡量嘗試撰寫語義化結構將能帶來實際的好處.同時,對標準的支持雖然沒有達到百分之百,但也已經越過臨界點讓我們現在就能使用符合網絡標準的方法撰寫網頁.有些時候必須做點犧牲,但是堅持撰寫越多的符合標準的標簽,未來的工作就會越輕松.

顯示效果 vs 結構標簽

本章節將會討論顯示效果與結構標簽的不同，更確切的說，是討論使用<strong>替換<b>,以及使用<em>替換<i>的差異.在本章稍后,我們也會討論幾個其他短語元素以及它們在符合標準,結構化標簽語法內的重要性.

你或許聽說過某些人建議在需要粗體文字時要用<strong>替換<b>,但是他卻沒有進一步告訴你為什么需要這樣的替換.在不知道"為什么"的情況下,實在很難期待其他網頁設計者只因為聽過需要這樣做就改變他們對標簽的使用習慣.

為什么<strong>和<em>比<b>和<i>好?

去掉<b>和<i>標簽,替換成<strong>和<em>到底是有什么好處呢?其實這一切都是為了表達語義和結構,而不是為了只是顯示效果,本書的所有示例也都努力遵循這個概念.

看看專家怎么說

首先,來看看w3c在html4.01的短語元素規范里是怎么敘述<strong>和<em>的(http://www.w3.org/tr/html4/struct/text.html#h-9.2.1):

短語元素能在文字片段之內加上結構信息,常見的短語元素意義如下:

<em> 代表強調

<strong> 代表更強烈的強調

所以在此討論的是兩種不同程度的強調.舉例來說,就是一個單字或者短語,念的時候應該比較大聲,音調較高,念的快些,或者是...嗯,就是比一般文字內容更強調.

w3c接著還敘述了下面這段內容:

短語元素的展示效果隨著瀏覽器的不同,一般來說可視化瀏覽器應該以斜體顯示<em>的文字內容,以粗體顯示<strong>的文字內容.語音合成軟件則能配合內容改變合成參數,像是音量,音調與速度等等.

啊哈!最后一句特別有意思,語音合成軟件(之前我們稱之為屏幕閱讀器)將會正確處理必須強調的文字,這的確是件好事.

相對之下,<b>或是<i>只是單純的顯示效果標簽.如果我們的目標是將結構與顯示效果分離的話,使用<strong>和<em>就是正確的選擇,單純想要顯示粗體,斜體文字的時候用css就好了.本章稍后會討論更多例子.

接著看兩個標識示例,幫助我們了解它們的差異.

方法a

your order number for future reference is: <b>6474-82071</b>.

方法b

your order number for future reference is: <strong>6474-82071</strong>.

又粗又美麗

這個情況是使用<strong>比<b>更適合的完美例子,我們打算讓句子內的特定文字顯示的更加重要.除了粗體顯示訂單編號以外,我們也希望屏幕閱讀器也改變它們表達這段內容的方式:提升音量,改變音調或速度.方法b能夠同時達到這兩個目的.

<em>又如何?

同樣的,以<em>取代<i>,能夠同時表達重要性,而不只單純的以斜體顯示文字內容.來看看這兩個例子:

方法a

it took me not one,but <i>three</i> hours to shovel my driveway this morning.

方法b

it took me not one,but <em>three</em> hours to shovel my driveway this morning.

強調語氣

在前面的例子里(本書撰寫時的真實情況),我的目的是使"three"這個字以強調語氣表現,如同我大聲念出這個字,視覺上,方法b在大多數瀏覽器里都會以斜體顯示,而屏幕閱讀器也會適當的調整音色,速度或音量.

只要粗體或斜體就好

必須注意的是,很多情況下只需要視覺上展示粗體,斜體的文字效果,換句話說,假設你的側邊欄里有一串鏈接列表,而你喜歡讓所有鏈接用相同的效果顯示:也就是粗體(圖6-1)

圖6-1.粗體鏈接放在側邊欄里的示例

除了視覺特色外,我們并不打算特別強調鏈接內容,這里就是以css改變鏈接外觀顯示效果的好地方,讓他們不會被屏幕閱讀器以及其他非可視化瀏覽器特別強調.

舉例來說,你真的想讓粗體鏈接被念得更快,更大聲,音調更高嗎?大概不會,這邊的粗體完全只是顯示效果.

font-weight相當于粗體

為了達到圖6-1的顯示效果,讓我們假設鏈接欄放在id設為sidebar的<div>中,這樣我們就能用css指定#sidebar之內的鏈接要以粗體顯示:

#sidebar a{

    font-weight:bold;

}

極度簡單,讓我覺得一提起就有些可笑,但是這的確是個幫助分離結構與顯示效果的好方法.

那是粗體!

同樣的,在思考斜體文字的時候也能應用類似的想法,在你不想強調的內容,只單純想以斜體顯示文字時,你能再度使用font-style屬性通過css處理這些狀況

讓我們使用相同的#sidebar作為示例,舉例來說如果你想使#sidebar里的所有鏈接顯示成斜體,那么可以這樣寫:

#sidebar a{

  font-style:italic;

}

又是個簡單至極的概念,但是在結構化標記語法的領域里,我覺得討論這些情況十分重要--使用css處理央視,代替顯示效果標簽的狀況.有些時候最簡單的解決方法也最容易被忽略.

共用粗體與斜體

在打算同時用粗體和斜體顯示文字內容的時候,我覺得必須先思考一個問題,你打算傳達什么程度的強調?根據這個問題的答案,我會選擇適當的標簽:<em>(強調)或<strong>(更強烈的強調),然后以選擇的標簽標記文字.

舉例來說,以下面的例子來說,我原本打算讓"fun"同時以粗體,斜體顯示,最后我選擇用<em>來強調這個字.

building sites with web standards can be <em>fun</em>!

大多數瀏覽器只會以斜體來顯示這個字,要同時使用粗體和斜體,我們有幾種選擇.哦,我真的希望你同意上面這句話.

普通的<span>

方法之一,是以普通的<span>包在"fun"之外,并且指定css規則將所有<em>之內的<span>以粗體顯示.標記語法看起來像這樣:

building sites with web standards can be <em><span>fun</span></em>!

而css看起來則像這樣:

em span{

  font-weight:bold;

}

明顯的語義部分并不好,因為我們加上了額外的標簽,但是這個方法人人仍然有用.

以class強調

另一個方法則是為<em>標簽指定一個class,并且以css加上粗體效果,標記語法看起來像這樣:

building sites with web standards can be <em class="bold">fun</em>!

而css看起來則像這樣:

em.bold{

    font-weight:bold;

}

使用<em>就能達成斜體效果(同時在語義上強調了文字內容),而為它加上bold class則會使<em>之內的文字以粗體顯示.

類似的方法也能用來修飾<strong>.這時我們能在加重強調某段文字的時候,設計italic class加上斜體效果,再配上<strong>原來就有的粗體效果.

標記語言看起來像這樣:

building sites with web standards can be <strong class="italic">fun</strong>!

而css則是這樣:

strong.italic{

  font-style:italic;

}