HTML 裡的 <head> 以前一直讓我很困惑，從小時候開始學 HTML， 坊間的書和中文的教學網站，在這邊通常都是草草帶過， 而小時候又不求甚解，反正瀏覽器容錯性這麼高，寫錯還是跑得出來。 然而，長大以後，對一些小細節就會特別去注意，也比較看得懂原文的網站， 所以在這邊整理一些 <head>「該放什麼東西，以及順序該怎麼排」。
<title>
<head> 裡面有一個必要的標籤，那就是<title>
所以一開始看起來應該會像這樣：
1 2 3 4 5 | |
如果不打 <title> 呢？ 瀏覽器不會跟你說你錯了，但是會自動幫你填入<title>， 至於填入什麼，不同的瀏覽器有不同的填法。但是因為這行是必要的， 所以送到 W3C HTML validation，它會跟你說你錯了。
Encoding
一般不指定 Encoding 時，瀏覽器會根據伺服器送過來的 header 或是用其他方法來判定。 但是這個判定不一定會是正確的，所以我們會在 <head> 告訴瀏覽器，我們使用的 Encoding 方式。
至於要用什麼編碼方式，在以往 UTF-8 還沒出現的時候，網路上的編碼非常亂， 甚至現在有一些比較老牌的網站還是在用那些 Encoding， 可是一旦網頁上如果出現其他語言，就非常可能變成亂碼。 所以在現代的網頁裡，幾乎都是使用 UTF-8。
那位置要放在哪呢？為了避免 IE 的安全性因素，編碼必須出現在最前面的1024 bytes。 所以我們把它放在最前面。
所以看起來應該會像：
1 2 3 4 5 6 | |
P.S.1:如果你的編碼選擇 UTF-8 ，那你的文件在存檔的時候，記得存成 UTF-8 without BOM
P.S.2:你可能看過各式各樣的寫法，但是在 HTML5 裡面，你只需要像上面這樣簡潔有力就可以了！
X-UA-Compatible
1
| |
為了萬惡 IE ，我們加了這行，這行做了兩件事情：
- 告訴 IE 要用最新的版本！
- 如果用戶有安裝 Google Chrome Frame，就使用 Google Chrome Frame！這是一個 IE 外掛，可以讓 IE 使用 Chrome 的 render 引擎。
不過加上這行可能會在一些需要認證的網站出現錯誤，所以建議讓伺服器用 header 的方式來送出。
如果你不介意，那加上去會是這樣：
1 2 3 4 5 6 7 | |
Description
1
| |
這是一個描述這個網站的標籤，搜尋引擎或是一些 spider 會用到這個資訊。
1 2 3 4 5 6 7 8 | |
Viewport
1
| |
由於現在行動裝置盛行，為了讓使用者瀏覽方便，所以在瀏覽器的預設寬度， 會讓沒有支援行動裝置的網站看起來比較舒服， 如果你的網站有做 Responsive Design ，記得加上這行。
1 2 3 4 5 6 7 8 9 | |
Favicon
1
| |
接著我們會放入 Favicon ，也就是網址列上面那個小 icon 。 一般瀏覽器就算你不寫這行，瀏覽器還是會去根目錄下尋找 favicon.ico 。 而且不管有沒有找到，瀏覽器通常不會再找第二次。
所以如果你有更新 Favicon ，記得加上這行，並改檔名，讓每個瀏覽器都能抓到最新版本。
在這裡你還可以放一些專屬於 APPLE 裝置的 icon。
1 2 3 4 5 6 7 8 9 10 | |
Javascript 和 CSS
接著我們會告訴瀏覽器要載入那些 CSS 和 Javascript 檔案。
先載入 CSS 還是先載入 Javascript？
由於 <script> 標籤如果沒加上 async 屬性的話，會 block 住瀏覽器，瀏覽器得讀完這個 script 才會繼續下一個動作，
而 <link> 標籤則沒有這個問題，所以先讀 CSS 再讀 Javascript，就可以讓瀏覽器同時下載 CSS 和 Javascript！
1 2 3 4 5 6 7 8 9 10 11 12 13 | |
如果要讓 Script 同步下載呢？
async 雖然可以讓 script 同步下載，但是如果沒管理好相依性是很可怕的！
譬如說：你寫了一段 script 用到 jquery 的 ready 方法，但是因為加了 async ，而瀏覽器還沒把 jquery.js 讀進來，
這個時候就會出錯了！
解決的方法就是使用一些延後讀取 Javascript 的套件，像 head.js 或是 require.js。
小結
以上，基本的 <head> 就完成了。網路上有太多奇奇怪怪的 <head> ，相信看完這篇，
可以稍微了解 <head> 倒底該塞什麼？ 順序該如何放？
參考資料：