HTML5 高效編碼的 8 個最佳實務

       HTML5已經日益成為目前Web開發的主流技術之一，並逐步向行動裝置 App開發領域滲透。HTML5的優勢在於無需外掛程式即可實現各種絢麗的效果，並且可以跨平台。但是目前HTML5技術還處於尷尬發展階段，標準遲遲無法成型，瀏覽器支援也是一個大的問題。 


       不可否認，HTML5是Web發展的趨勢，因此，對於Web開發人員和設計人員來說，HTML5是必須掌握的技術。本文整理了一些HTML5編碼的最佳實務，希望對你的學習和開發工作有所協助。 

1.  使用HTML5代碼產生器 


       在開發HTML5網站或應用時，如果單靠手動編寫代碼，這將花費大量的時間。你可以使用HTML5代碼產生器，這樣你需要做的只是根據需求填寫一個表單，然後就可以自動產生HTML5代碼了。而且，這些產生器非常便於使用。 


以下是一些推薦的HTML5代碼產生器： 

• Shikiryu
  HTML5 Generator
• Switch
  to HTML5 Generator
• Quackit
  HTML5 Generator

2.  正確認識Doctype 


       確保你正確認識HTML5的doctype，這非常重要。你要記住，開發HTML5網站不是僅僅更改doctype標籤就行了。因此，在你做出任何決定或改變之前，請確保你很好地理解了doctype，以免造成混亂。 

3.  使用參考手冊（Cheat Sheet） 


      技術總是在不斷向前發展，並逐漸積累了大量的特性，因此，如果你無法記住所有的HTML5特性也無需自責。對大部分人來說，記住所有這些特性是非常困難的。但是，你可以藉助參考手冊。 


展示的就是HTML5相關標籤，你可以隨時查閱，點擊看大圖。 

4.  向後相容 

       目前基於WebKit的瀏覽器幾乎支援所有的HTML5功能。另外，使用HTML5的一個好處在於，它是被設計成向後相容的，這意味著你可以輕鬆實現降級，而無需請教專業人士。 

5.  盡量避免相容性問題 


        儘管一些HTML5特性已經實現標準化了，但是在開發過程中仍會面臨一些相容性問題。這不應該成為一個問題，在你使用HTML5元素之前，你可以通過Can I Use.com網站輕鬆找出瀏覽器支援哪些元素，不支援哪些元素。此外，你還可以在該網站找到其他一些重要技術（如CSS3、JavaScript）相關的相容性圖表。 

6.  準確地使用元素 


       在使用任何元素之前，理解每個元素和它的用途非常重要的。讓我們來看看HTML5的一些主要元素以及主要用途。 

• <header>：主要定義文檔的頁首（介紹資訊）。
• <hgroup>：用於對網頁或區段（section）的標題進行組合。
• <nav>：通常用於導覽功能表。
• <section>：主要用於定義文檔中的節（section、區段），比如章節、頁首、頁尾或文檔中的其他部分。
• <article>：主要用於定義獨立的內容，如論壇文章、報紙文章、部落格條目、使用者評論等。
• <footer>：和<header>類似，用於定義文檔的頁尾地區。

這些只是一些基本的HMTL5元素，你可以參考W3school 

7.  在老版本IE中使用HTML5 


        對於Web開發人員和設計人員來說，IE存在各種各樣的問題，無法稱得上一個“現代瀏覽器”。但是，你可以使用一個指令碼來讓老版本的IE支援HTML5。 

你所需要做的只是加入以下代碼： 

Html代碼 

1. <!--[if lt IE 9]>  
2. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
3. <![endif]-->  

8.  代碼驗證 


       一旦你完成了HTML5網站的編碼工作，接下來你需要驗證你的代碼。你可以通過W3C validator進行驗證。這是一個完美的工具，可以用來檢查代碼的品質，並會顯示代碼中存在的錯誤。 

英文原文：點擊開啟原文