初學DIV+CSS應該理解HTML標籤的語義

來源:互聯網
上載者:User
css|初學

如今Web標準都被通俗的叫做“div+css”或者“層布局”。我不反對這種便宜行事的叫法。但是這樣會陷入一個誤區:即大量的使用div標籤作為結構元素。事實上這是一種更進階的div濫用(Jeffrey Zeldman在《網站重構》一書中提到)。

HTML為我們提供了相當豐富的標籤,每個標籤都有它各自的含義。我認為在設計時,除了遵循HTML文法以外,應該充分利用並遵守各標籤的“語義”。如標題文字應該包含在h1-h6中,大段的文字內容應該由<p>進行分段而不是<br />,清單項目應該放在ul或ol或dl中,表格形式的資料應該仍然用table布局。

為什麼要這樣做?一個很令人信服的原因是,保證在使用者去掉CSS顯示的情況下,網頁能夠盡量有效將內容的結構層次顯示出來。如果全部用div,當去掉CSS之後,整個網頁就失去了層次,只剩下一些雜亂的文字片段。這並不符合Web標準對低配置相容性的要求。

我下面詳細的列舉一下我對一些標籤的語義的理解:

p br
先說個最簡單的。分段要用p標籤而不是用br(甚至連續兩個<br />)。這個似乎不用多說。但是有時候我們不得不放棄這個原則。一個常見的例子是論壇發帖,如果我想分段,便打斷行符號。而如此傳輸到後台並顯示出來的,顯然就是用<br />分段的。

table th
由於大力宣揚div+css的結果,似乎現在誰用table布局誰就是未開化的土著。但我認為這種觀點是不正確的。table的含義是表格,因此凡是應該以表格形式出現的資料,仍然應該用table布局。簡單的例子是班級同學的花名冊,包括姓名學號性別等等,這明顯是一個表格形式的資料,因此應該用table布局。另一個比較值得探討的例子是,blog裡面的日曆導航。我曾經有見過一個blog程式,它的日曆導航裡的各個日期,從1號到30號全用div套好,再使用float:left樣式7個一排的排出當月的日曆。當我取消瀏覽器的CSS顯示之後,日曆的那部分則從1號到30號一豎排下來。我認為這是不對的。因為日曆應該是一個表格形式的資料,因此仍然應該用table布局。當取消css之後,應該仍然按照一排7個的樣子歸成一個表格。

th則是另一個會被忽視的標籤。由於CSS的萬能,所有的表格單元都可以用td加一個class屬性搞定。但是從語義上講,一些表格單元應該用th標籤。比如上文說到的日曆表格,裡面的“MON TUE WED... SUN”這些標識星期的單元,就應該用th而不是td。

h1-h6
對於h1-h6標籤,從語義上講,它們應該適用於所有標題文字。因此,一些如<div class="diary-title>的寫法都是多餘的,直接寫成<h1>,然後直接對h1而不是.diary-title定義CSS,不是一樣的效果嗎?當然,這個規矩我也不能定得太死,因為有時候標題部分的結構元素並不能簡單的用一個h1就能解決的。但我最多用類似<h1><span></span></h1>的方法將標題的結構嵌套得更複雜,以滿足表現的需要。

但這裡會出現一個語義上的分歧。h1究竟該理解為一級標題呢還是理解為1號字型大小的標題。我通常理解為一級標題,一級標題下再有小標題就用h2。但是事實上回顧HTML設計之初,h1-h6後面的數字更多的被理解為控制標題文字大小的。用h3或許只是為了使用三號大小的字型,而並非它就是三級標題。否則一級標題全用h1,個個都是鬥大的字,又不得不用CSS來控制字型大小,感覺很累贅。所以,這是一個待商榷的問題。

ul ol
凡是需要羅列條款的,都應該用ul或者ol,而不是用p。比如招聘廣告裡的職位需求,比如注意事項,比如操作步驟說明。此外一個流行的用法是網頁的導覽功能表也用ul li來列舉,然後再用CSS控制其相片順序。

應該要補充的是,別忘了li裡面還可以再用ul或ol,形成第二級列表。

dl dt dd
這是一組幾乎被人忘記的標籤,但Jeffrey Zeldman在《網站重構》中大力推崇對它們的使用。dl應該是“defining list(或是definition list?有知道的朋友請告訴我)”的全稱,一個典型的用法是字典的詞條。單詞的名字放在dt裡面,單詞的解釋放在dd裡面。而alistapart.com網站更加高明的,將右側欄整個定義為dl,每個單元的標題用dt,而該單元的內容則用dd。

img
img標籤本身也沒啥好說的。只是想老生常談一個,即只有當確實這個元素是內容裡必須的圖片的時候才使用img,否則應該用CSS定義為樣式。如插圖,頭像,表情表徵圖,這些是內容裡必須出現的圖片,用img。而其他的比如標題的背景圖,清單項目前面的小icon,這些都不應該用img標籤。

span
span如今大有和div並駕齊驅的風頭。但是事實上我認為我們還是應該遵從它最初的使用。我個人的理解,span最初就是用來帶class或者style屬性的。它本身不具有明確的語義。因此在文字資料流中,我們需要對某些文字做樣式上的改變,就用span括起來。比如有些字需要加紅,我就用<span class="red">。

但是值得注意的是,這樣又有可能犯之前h1裡面提到的問題。因為有些文字的樣式其實是有現成的標籤的,比如<strong>、<sub>等,我們也應該適當的給它們一些機會。

a
a是控制超串連的標籤。但有些特殊的情況,我們不一定喜歡用它。比如需要彈出一個小視窗。我沒怎麼留心,但我想有些設計師會將onclick直接定義到“播放”小表徵圖的<img>標籤裡。我個人認為還是應該在img外面加一個a,然後將onclick定義到a裡面,並記住在js函數最後寫上return false。如果可以,該a標籤的href屬性也應該寫上快顯視窗的URL,保證使用者在禁止JS的情況下仍能夠有效開啟頁面。

我暫時就列出這麼多。

最後再總結一下遵循HTML標籤語義的重要性。Web標準的其中一個要求是低配置的相容性:當使用者禁用圖片、禁用CSS或禁用JS的時候,我們仍能夠讓他有效瀏覽網頁內容。眾所周知強制alt屬性就是為禁用圖片時的相容性作考慮。而正確的遵循HTML標籤的語義,則是保證禁用CSS時的相容性。只有當正確使用了HTML標籤,我們的網頁在“CSS裸奔”的時候,才會仍然讓人看得出哪裡是導覽功能表,哪裡是文章標題,日曆表格也不會分崩離析。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。