HTML 檔頭 head：給瀏覽器與搜尋引擎讀的資訊

Q: CSS 與 JavaScript 一定要放在 head 嗎？

樣式放 head 可以避免畫面先無樣式再套上的閃爍。程式碼則建議放在 body 結尾，或留在 head 但加上 defer，讓它不會擋住 HTML 的解析。

可置放 JavaScript、CSS、網頁標題、網頁編碼、重新整理、關鍵字...等，主要是讓瀏覽器、搜尋引擎讀取。（不會顯示於網頁瀏覽者眼前的）其中編碼宣告與網頁標題是每一頁都該有的，行動裝置還需要 viewport 設定。

html

<head>
  ...
</head>

它與內容區 body 是根元素 html 底下的兩大區塊：head 描述這份文件，body 才是文件的內容。

一份標準的 head

html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 檔頭 head｜F2E 前端工程文件</title>
  <meta name="description" content="head 能放哪些元素，以及各自的用途。">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="./style/all.css">
  <script src="./js/index.js" defer></script>
</head>

元素	用途	是否必要
`<meta charset>`	宣告文件編碼，避免中文變亂碼	必要
`<title>`	網頁標題	必要
`<meta name="viewport">`	行動裝置的縮放與寬度	幾乎必要
`<meta name="description">`	搜尋結果的摘要文字	建議
`<link rel="icon">`	網站圖示	建議
`<link rel="stylesheet">`	引入外部 CSS	視需求
`<script>`	引入 JavaScript	視需求

小提醒

<meta charset="UTF-8"> 請寫在 head 的第一行。瀏覽器要先知道編碼，才能正確解讀後面的內容。

元資訊

用 <meta> 定義關於這份文件的資料，例如：編碼、頁面描述與社群分享的預覽資訊。它是空元素，一切都靠屬性表達，一頁可以放多個。

元資料

檔頭裡與 SEO 有關的標籤可分成搜尋結果呈現、行動裝置與編碼、社群分享預覽三類，完整清單見 SEO 要放哪些 meta 標籤。

寫法	說明
`charset`	宣告文件編碼，要寫在 `<head>` 的第一行。
`name` + `content`	描述這一頁，例如：`description`、`viewport`、`robots`。
`property` + `content`	社群平台讀取的 Open Graph 預覽資訊。
`http-equiv`	模擬 HTTP 標頭，例如：重新導向。

詳細用法請見元資訊。

網頁標題

用 <title> 定義這一頁的標題，與 SEO 息息相關。撰寫時把最重要的關鍵字放前面，中文長度約 30 個字以內。

小提醒

網頁標題與網頁文件內使用的標題元素是兩個不一樣的東西喔! 且每個網頁必須有獨一無二的標題內容，不應重複!

出現位置	說明
瀏覽器頁籤	空間很窄，只看得到開頭幾個字。
書籤與瀏覽紀錄	加入書籤時的預設名稱。
搜尋結果	第一行的標題，決定使用者要不要點進來。
社群分享	未設定 `og:title` 時的備援來源。

詳細用法請見網頁標題。

網站圖示

顯示在瀏覽器頁籤與書籤列的網站專屬圖示，一般會使用該網站的 Logo。現在的做法是以 favicon.svg 為主檔，再補上幾份備援給舊瀏覽器與 iOS。

檔案	用途
`favicon.svg`	瀏覽器頁籤的主要圖示，向量可縮放。
`favicon.ico`	內含 16、32、48 三種尺寸，給舊瀏覽器的備援。
`apple-touch-icon.png`	180×180，iOS 加入主畫面時的圖示。

詳細用法請見網站圖示。

CSS 樣式

在 HTML 文件中套用 CSS，寫法分成外部樣式表、內部樣式與行內樣式三種。日常開發以外部樣式表為主力，放在檔頭則是為了避免畫面先無樣式再套上的閃爍。

方式	說明
`<link rel="stylesheet">`	外部樣式表，可跨頁共用也能被快取。
`<style>`	內部樣式，適合單頁特例與關鍵樣式。
`style` 屬性	行內樣式，留給程式動態產生的值。

詳細用法請見 CSS 樣式。

JavaScript 程式碼

在 HTML 文件中載入 JavaScript，用 <script> 連結外部檔案，或直接把程式寫在標籤之間。要注意沒加任何屬性的 <script> 會讓 HTML 的解析停下來，所以通常會搭配 defer 或 async。

寫法	說明
`<script src="...">`	外部引入，連結獨立的 `.js` 檔案。
`<script>`	內嵌，直接把程式寫在標籤之間。
`defer`	背景下載，HTML 解析完成後依序執行。
`async`	背景下載，下載完立刻執行，順序不保證。

詳細用法請見 JavaScript 程式碼。