網頁標準化負面教材 – PChome 樂屋網

前幾天突然發現 PChome 首頁多了個 樂屋網，上面還有個奇怪的長腳屋子，於是乎我就忍不住好奇心點進去看，當然，不可免俗的我又去檢視人家的原始碼，看了之後，實在是為台灣的網頁標準化發展感到悲哀跟無力。

[備註] 各位，這是 2009 年 01 月 04 日的樂屋網問題，但是現在的樂屋網已經完全不一樣了，HTML 結構符合語義與結構化的原則，使用方式也有遵循W3C的規範，CSS的使用也相當精簡而且有整合過，因此千萬別將我這篇文章的評論加諸在現在樂屋網的標準化頁面開發人員喔～這樣他們就未免太冤枉了 :D 。有問題的地方我們要給予批評指教，但是有改進就要大大鼓勵唷！大家給新的樂屋開發人員掌聲吧～

 

在網頁標準化技術儼然成為全球網際網路發展普遍的必然趨勢後，PChome 看起來也是不得不跟進這股標準化的潮流，不過自從 PChome 首頁改版至今，好像還沒有看到 PChome 真正在自家網站上完全落實網頁標準化技術。首頁、相簿、還有分紅網，頁面看似標準化，卻硬是留了個 table layout 的尾巴，不知道是在想什麼；線上購物、24h購物、和女性購物就更不用說了，根本就是慘不忍睹的 table layout 過時網頁；至於部落格、商店街、露天拍賣則都是雖然有做標準化，但是大概都只有部份頁面，好吧，那就慢慢來，起碼有在做。

這個剛出來的樂屋網是怎樣？要嘛像首頁那樣做不完整的標準化，要嘛像購物系列網站那樣不鳥標準化完全用 table layout，沒事做個錯誤百出的標準化是在幹嘛？在幫 PChome 集團增加笑點嗎？

因為很多是屬於非常經典的門外漢錯誤，通常出自於那種自以為會網頁標準化，但實際上卻完全不瞭解網頁標準化的人手中，每次光靠嘴巴講大家都感受不到，這會子讓我逮到這個千載難逢的好機會，全部整理在這裡，省得我還要想破頭找例子。

Error 1：<span> 和 <div> 濫用病

HTML 給你 <span> 和 <div> 不是讓你拿來亂用的，見什麼包什麼，整個網站看不到一個<h1>，<div> 和 <span> 倒是多到滿出來

Error2：行內元件不得包區塊元件

用 <span> 就算了，怎麼會把 <span> 包在 <ul> 外面，難道連 <span> 是行內元件這種基本常識都不知道嗎？這樣用是想要讓 W3C 中風嗎？

 

這是什麼東西？

Error3：不要把沒有意義的東西放到HTML當中

什麼叫做沒有意義的東西？所有裝飾性、效果用、不具備實質內容的東西就叫做沒有意義的東西，這些東西嚴格來講都不應該出現在HTML內容當中，要如何檢查自己的網頁有沒有出現沒有意義的東西？很簡單，拿掉你的樣式檔就知道了，如果沒有套用樣式的網頁請人來看有出現那種看不懂的鬼，就代表你沒有把網頁標準化做好，請回過頭去好好修改你的HTML，直到誰來看都可以看得懂為止。

 

這又是什麼東西？

這又是什麼東西？

Error4：無意義 <div> 的使用

樂屋網原始碼另外一個重大的特色，就是特別喜歡在一個 <ul> 外面莫名其妙的包上一個 <div> ，而且感覺上相當明顯只是為了幫 <ul> 加上一個包含 class 的 <div> 。在這裡，我要告訴每個撰寫 HTML 的人，如果你無法為你的每個標籤說出一個它結構上或樣式上必須存在的理由，就代表你的標準化工作有待加強，樂屋這樣的結構，除非有很特別的理由，否則這可以說是非常莫名其妙的垃圾碼，難道你不知道 class 可以直接下在 <ul> 上面減少無聊的 <div> 嗎？

上面的部份只是提到一些初學者或是狀況外人員容易犯的錯誤，其他那種什麼連結沒有加上 title ，或是 img 應該加上 alt 而不是 title 這種小地方就不想講了，接著我只想講樂屋的 CSS 內容，否則大概寫到明天都寫不完。一般來講，標準化程度的好壞看 HTML 就知道，看 CSS 只是順便讓更多人瞭解哪些基本錯誤不應該犯，更不要連這些東西都不知道還想要做標準化，這是會被人家笑掉大牙的。

Error5：莫名其妙的CSS樣式

仔細看看，居然會看到有人對標籤下 dispaly:inline 以後，又幫它加上 width 和 height 的屬性，拜託一下，這是忘了刪掉嗎？行內元件你是要怎麼指定寬高啊？但是寬還是有作用，為什麼捏？因為它加上了 float:right  的屬性，這個屬性加上去了以後， dispaly:inline 就失去作用了，整個元件會成為區塊元件，也就是說，這個寫 CSS 的傢伙基本上是可以把多餘的垃圾 dispaly:inline 拿掉，因為完全不知道它寫在這裡是要幹嘛的。很多人剛開始寫 CSS，會用亂猜的方式來寫，這個屬性不行就換那個屬性，結果寫了一堆莫名其妙自己也說不出所以然的屬性在上面，但是 CSS 其實是很講邏輯的，就如同程式一般，寫 CSS 的時候請使用邏輯來思考，不要亂猜一通，增加 CSS 的體重。

 

Error6：善用簡單表示式來最佳化 CSS

這個嚴格來講並不算是Error，但是卻是應該要改善的地方，CSS 檔案裡面到處都是 margin:0px 0px 0px 0px 或是 padding:0px 0px 0px 0px 這種東西，幹什麼不直接用 margin:0 和 padding:0 處理掉？還那麼特意要加上 px，0 就是 0 了，加上 px 也沒有任何意義，這種不深思熟慮的作法平白無故增加了多少字元跟檔案大小？做網站的人，如果不能夠對自己嚴格要求的去考慮效能與檔案大小，怎麼能夠算是專業？

樂屋網只是一個例子而已，在台灣，有著許多跟樂屋一樣不但談不上標準化，甚至還做出錯誤標準化的網站，這種網站，與其跟著標準化的腳步走，不如還停留在 table layout 的舊網頁技術還比較好一點。標準化技術並不是鬆散隨便的，它有著很嚴謹的規範與技術規格，做網站的人，無論是標準化工程師或是網站開發工程師，甚至包括網頁設計師，都必須要有足夠的專業知識來面對，如果不能夠無時無刻的要求自己、檢視自己、深刻的反省自己不足的地方，你就沒有辦法把你的工作做到最好。

如果不能夠時時刻刻的要求自己，還做出這種錯誤連篇的偽標準化網站，在我眼裡看來，就是在拿自己的專業當笑話而已。