2 HTML標簽的語義
如今Web標準都被通俗的叫做“div+css”或者“層布局”。我不反對這種便宜行事的叫法。但是這樣會陷入一個誤區(qū):即大量的使用div標簽作為結(jié)構(gòu)元素。事實上這是一種更高級的div濫用(Jeffrey Zeldman在《網(wǎng)站重構(gòu)》一書中提到)。
HTML為我們提供了相當豐富的標簽,每個標簽都有它各自的含義。我認為在設(shè)計時,除了遵循HTML語法以外,應(yīng)該充分利用并遵守各標簽的“語義”。如標題文字應(yīng)該包含在h1-h6中,大段的文字內(nèi)容應(yīng)該由<p>進行分段而不是<br />,列表項應(yīng)該放在ul或ol或dl中,表格形式的數(shù)據(jù)應(yīng)該仍然用table布局。
為什么要這樣做?一個很有說服力的原因是,保證在用戶去掉CSS顯示的情況下,網(wǎng)頁能夠盡量有效的將內(nèi)容的結(jié)構(gòu)層次顯示出來。如果全部用div,當去掉CSS之后,整個網(wǎng)頁就失去了層次,只剩下一些雜亂的文字碎片。這并不符合Web標準對低配置兼容性的要求。
我下面詳細的列舉一下我對一些標簽的語義的理解:
p br 先說個最簡單的。分段要用p標簽而不是用br(甚至連續(xù)兩個<br />)。這個似乎不用多說。但是有時候我們不得不放棄這個原則。一個常見的例子是論壇發(fā)帖,如果我想分段,便打回車。而如此傳輸?shù)胶笈_并顯示出來的,顯然就是用<br />分段的。
table th 由于大力宣揚div+css的結(jié)果,似乎現(xiàn)在誰用table布局誰就是未開化的土著。但我認為這種觀點是不正確的。table的含義是表格,因此凡是應(yīng)該以表格形式出現(xiàn)的數(shù)據(jù),仍然應(yīng)該用table布局。簡單的例子是班級同學(xué)的花名冊,包括姓名學(xué)號性別等等,這明顯是一個表格形式的數(shù)據(jù),因此應(yīng)該用table布局。另一個比較值得探討的例子是,blog里面的日歷導(dǎo)航。我曾經(jīng)有見過一個blog程序,它的日歷導(dǎo)航里的各個日期,從1號到30號全用div套好,再使用float:left樣式7個一排的排出當月的日歷。當我取消瀏覽器的CSS顯示之后,日歷的那部分則從1號到30號一豎排下來。我認為這是不對的。因為日歷應(yīng)該是一個表格形式的數(shù)據(jù),因此仍然應(yīng)該用table布局。當取消css之后,應(yīng)該仍然按照一排7個的樣子歸成一個表格。
th則是另一個會被忽視的標簽。由于CSS的萬能,所有的表格單元都可以用td加一個class屬性搞定。但是從語義上講,一些表格單元應(yīng)該用th標簽。比如上文說到的日歷表格,里面的“MON TUE WED... SUN”這些標識星期的單元,就應(yīng)該用th而不是td。
h1-h6 對于h1-h6標簽,從語義上講,它們應(yīng)該適用于所有標題文字。因此,一些如<div class="diary-title>的寫法都是多余的,直接寫成<h1>,然后直接對h1而不是.diary-title定義CSS,不是一樣的效果么?當然,這個規(guī)矩我也不能定得太死,因為有時候標題部分的結(jié)構(gòu)元素并不能簡單的用一個h1就能解決的。但我最多用類似<h1><span></span></h1>的方法將標題的結(jié)構(gòu)嵌套得更復(fù)雜,以滿足表現(xiàn)的需要。
但這里會出現(xiàn)一個語義上的分歧。h1究竟該理解為一級標題呢還是理解為1號字體大小的標題。我通常理解為一級標題,一級標題下再有小標題就用h2。但是事實上回顧HTML設(shè)計之初,h1-h6后面的數(shù)字更多的被理解為控制標題文字大小的。用h3或許只是為了使用三號大小的字體,而并非它就是三級標題。否則一級標題全用h1,個個都是斗大的字,又不得不用CSS來控制字號,感覺很累贅。所以,這是一個待商榷的問題。
ul ol 凡是需要羅列條款的,都應(yīng)該用ul或者ol,而不是用p。比如招聘廣告里的職位需求,比如注意事項,比如操作步驟說明。此外一個流行的用法是網(wǎng)頁的導(dǎo)航菜單也用ul li來列舉,然后再用CSS控制其排列方式。
應(yīng)該要補充的是,別忘了li里面還可以再用ul或ol,形成第二級列表。
dl dt dd 這是一組幾乎被人忘記的標簽,但Jeffrey Zeldman在《網(wǎng)站重構(gòu)》中大力推崇對它們的使用。dl應(yīng)該是“defining list(或是definition list?有知道的朋友請告訴我)”的全稱,一個典型的用法是字典的詞條。單詞的名字放在dt里面,單詞的解釋放在dd里面。而alistapart.com網(wǎng)站更加高明的,將右側(cè)欄整個定義為dl,每個單元的標題用dt,而該單元的內(nèi)容則用dd。
img img標簽本身也沒啥好說的。只是想老生常談一個,即只有當確實這個元素是內(nèi)容里必須的圖片的時候才使用img,否則應(yīng)該用CSS定義為樣式。如插圖,頭像,表情圖標,這些是內(nèi)容里必須出現(xiàn)的圖片,用img。而其他的比如標題的背景圖,列表項前面的小icon,這些都不應(yīng)該用img標簽。
span span如今大有和div并駕齊驅(qū)的風頭。但是事實上我認為我們還是應(yīng)該遵從它最初的使用。我個人的理解,span最初就是用來帶class或者style屬性的。它本身不具有明確的語義。因此在文本流中,我們需要對某些文字做樣式上的改變,就用span括起來。比如有些字需要加紅,我就用<span class="red">。
但是值得注意的是,這樣又有可能犯之前h1里面提到的問題。因為有些文字的樣式其實是有現(xiàn)成的標簽的,比如<strong>、<sub>等,我們也應(yīng)該適當?shù)慕o它們一些機會。
a a是控制超連接的標簽。但有些特殊的情況,我們不一定喜歡用它。比如需要彈出一個小窗口。我沒怎么留心,但我想有些設(shè)計師會將onclick直接定義到“播放”小圖標的<img>標簽里。我個人認為還是應(yīng)該在img外面加一個a,然后將onclick定義到a里面,并記住在js函數(shù)最后寫上return false。如果可以,該a標簽的href屬性也應(yīng)該寫上彈出窗口的URL,保證用戶在禁止JS的情況下仍能夠有效的打開頁面。
我暫時就列出這么多。
最后再總結(jié)一下遵循HTML標簽語義的重要性。Web標準的其中一個要求是低配置的兼容性:當用戶禁用圖片、禁用CSS或禁用JS的時候,我們?nèi)阅軌蜃屗行У臑g覽網(wǎng)頁內(nèi)容。眾所周知強制alt屬性就是為禁用圖片時的兼容性作考慮。而正確的遵循HTML標簽的語義,則是保證禁用CSS時的兼容性。只有當正確使用了HTML標簽,我們的網(wǎng)頁在“CSS裸奔”的時候,才會仍然讓人看得出哪里是導(dǎo)航菜單,哪里是文章標題,日歷表格也不會分崩離析。
經(jīng)典論壇討論: http://bbs.blueidea.com/thread-2699896-1-1.html
出處:藍色理想
責任編輯:moby
上一頁 對于web標準和W3C XHTML規(guī)范的理解 下一頁
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|