WDEV-HTML-BestPractice

一、永遠 HTML 在開頭宣告 


...

DOCTYPE 的作用是用來告訴瀏覽器，你寫的 HTML 是用哪一種類型的文本，  表示 HTML5。
沒有這個宣告的話，預設會使用怪異模式，也會影響 CSS 的的樣式。
二、加入 
 這行是用來宣告編碼的類型，加在 之中，避免出亂碼，尤其是像我們是使用中文。
三、設定 Viewport
針對於網頁響應式設計，在不同的裝置上，透過 viewport 維 device-width 的方式，可以讓畫面自動適應不同的裝置大小，讓網頁在手機中也可以出現預期的顯示畫面。

四、一制性縮排
建議使用 2 space。

    
  
  • Fantastic
  
  • Great


四、撰寫具有語義的 HTML
除了基本的 
…
 等，HTML5 帶來了更多的語意化標籤，使用這些元素，除了可以讓合作的人更容易看懂，對於 SEO 也會有所幫助。
Image for post
五、盡可能的把 CSS 放在  之間，JS 放在底部
瀏覽器是會逐行地解析 HTML 頁面，遇到 CSS、JS 時就會先停下來，透過網路去要這些資源，因此 CSS 跟 JS 在 HTML 的位置會對網頁載入畫面的時間有所影響
原因是將 CSS 放在 ，會盡快載入，將與 HTML 一起盡快轉譯渲染畫面給使用者，而將 JS 放在底部，是讓它晚一點再被載入，因為通常 JS 是需要等到 HTML DOM 載入後才需要執行。

  


  ...
  

六、透過 W3C 驗證 HTML
你可以將你的 HTML 上傳到 W3C 的網頁，驗證 HTML 正確性。
Ready to check - Nu Html Checker
This tool is an ongoing experiment in better HTML checking, and its behavior remains subject to change
validator.w3.org
參考更多：
Google HTML/CSS Style Guide
This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality…
google.github.io
HTML5 Style Guide
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript…
www.w3schools.com

Labels: webdev.