檢查網站是否通過HTML5驗證?

製作網頁的門檻其實不高,但是想要通過W3C標準驗證那就不容易了。雖然說沒有通過驗證也不會讓網站不能看,或是搜尋引擎搜尋不到,但是既然有一個標準規則,有能力的話倒是可以嘗試挑戰自己,試著去遵守標準規範,未來網頁後續維護、或是轉接給別人,也比較好做調整,不會標準不一,讓後續維護或是接手的人感到許多困擾。

一直以來,網頁標準就好幾版,現在又多出了一個新規格HTML5,不過這規格是未來的趨勢走向,因為越來越多的瀏覽器都開始支援,因此網站打造成HTML5是遲早的事情。如果現在有時間,倒是可以自我挑戰,把網站改成HTML5的架構,並搭配W3C的規範,讓網頁符合未來標準,先做這些動作,並不會比較吃虧,而是以後就不用忙著轉換規格了。


目前驗證的網站有標準的W3C和另外一個專門的HTML5驗證網站,兩者驗證出來結果是相差不遠的,但是大家可以根據兩個驗證的網站作為參考,進而修改自己的網站,以符合標準規格。以前的年代就是規格不一,再加上IE瀏覽器都喜歡跑自己的規格,才會讓網頁設計者一天到晚需要校正東、校正西的,如果都循相同標準,這些麻煩事就都沒了。

W3C驗證服務

第1步  輸入網址之後,編碼部分選【utf-8(Unicode,worldwide)】,Document Type選擇【HTML5(experimental】,然後點﹝Check﹞檢測。

檢查網站是否通過HTML5驗證?

第2步  檢測完後,會看到錯誤與警告,下方有提示說明可進行修正。

檢查網站是否通過HTML5驗證?

第3步  以下方的錯誤為例,這是指Facebook讚按鈕的iframe樣式需要改用CSS去調整,等於說我們需要修改iframe語法將它改成CSS屬性,然後到網站的style.css內加入對應的CSS。

檢查網站是否通過HTML5驗證?

Validator.nu 驗證服務

第1步  這是另外一個驗證服務,專門驗證HTML5的,可以直接輸入網址,並點﹝Validate﹞。

檢查網站是否通過HTML5驗證?

第2步  很快的,錯誤訊息就會再次出現了,快根據錯誤修正吧!(香腸比較偏好這個網站,因為她清晰乾淨,比較好看到錯誤訊息是什麼)

檢查網站是否通過HTML5驗證?

通常,驗證不過的都是外部服務,以香腸炒魷魚為例,Facebook留言框讚按鈕Google+1按鈕等等的外部服務造成驗證不過,不然基本的網頁架構是都修正完畢了。當然只丟網站首頁只有對首頁驗證,可以丟一下其他內頁部分進行驗證,把網頁修正完畢。

香腸在驗證的時候,發現他幫我檢測出我的開新視窗連結語法拚錯、側邊欄網頁模組少一個div,感覺蠻有效益的,大家有空的時候,不妨也拿自己的網站去檢測看看,讓自己的網站符合標準規則。雖然沒有正確的資訊說符合標準對SEO絕對優勢,但是能符合標準,未來要解決問題也會比較好處理。