HTML 的 head 裡面有什麼

前言

前一篇講了身體，但是既然有身體，那怎麼會沒有頭呢？所以這一篇講一下 HTML 的「頭」。

什麼是 HTML 的頭

HTML 的頭（Head）是在頁面載入後不會顯示在瀏覽器的部分，它一般用來儲存一些資訊和嵌入一些樣式表、JavaScript 文件用的。上一篇所提到的所有元素都會使用 body 元素包起來，而這篇講的元素都會使用 head 元素包起來（有例外，下面會說）。

head 裡面有什麼

頁面標題

頁面標題是什麼應該不用特別說吧？瀏覽器開啓一個頁面之後，分頁籤上顯示的文字就是頁面標題。那怎麼設定頁面標題呢？這就要說到一個元素了——title。

<title>頁面標題</title>

方法就這麼簡單，當然它也可以透過 JavaScript 控制，這個之後再說。

Metadata

中國那邊翻譯是元數據，台灣這邊不太確定，我查到的資料是元資料、詮釋資料（有知道的大佬可以指點一下）。metadata 的設定方式很簡單，其實就是對 meta 元素添加屬性。下面說一些比較常用的。

文字編碼

<meta charset="utf-8" />

這個是用來指定頁面允許使用的字元集的，utf-8 是最常見的編碼，它是一個通用字元集，幾乎包含了任何人類語言的字元。當然，有些瀏覽器會自己修復，但是這種事情還是要避免的，這個沒有爭議吧？

網站資訊

我只列出一些常用的：

<meta name="author" content="網站作者" />
<meta name="description" content="網站的介紹" />
<meta name="keywords" content="HTML,metadata,網頁開發" />

author：網站作者。
description：網站的介紹。
keywords：網站的關鍵字，用半型逗號（,）隔開。

網站主題色

<meta name="theme-color" content="#155896" />
<meta name="color-scheme" content="dark" />

值	說明
`theme-color`	定義使用者代理應用於自定義頁面或周圍使用者介面顯示的建議顏色。例如，瀏覽器可能會使用指定的值為頁面的標題列著色，或者將其用作選項卡欄或任務切換器中的顏色突出顯示。
`color-scheme`	這個值必須和 CSS 的 `color-scheme` 屬性值匹配，它是用來確定頁面的配色方案的。

網站 OG

OG（Open Graph Protocol）是由 Facebook 提出的設定，官方翻譯為「開放社交關係圖」，目的是讓網頁在社交媒體上能夠有更加豐富的展示，例如縮圖、標題、描述等。

<meta property="og:title" content="部落格｜Infinity 資訊" />

如同上面的程式一樣，OG 都是由一個一個同時且只有 property、content 屬性的 meta 元素。

一般的（除了 X 之外的）：

標籤	說明
`og:url`	不帶路徑、參數、查詢條件之類的網址。
`og:title`	頁面的標題，通常是 `title` 元素的值。
`og:description`	頁面的介紹。
`og:image`	縮圖。
`og:type`	網站類型。（具體看參考資料第 4 點）
`og:locale`	地區，預設是 `en_US`

具體看參考資料第 3 點。

X 的：

這個平台有些討人厭的是，它使用一套自己的標準，如果不按照它的標準來，很容易會有問題。下面列出一些重要的：

屬性	是否必要	說明
`twitter:card`	是	常見的值為 `summary`、`summary_large_image`，其他的值是屬於其他的用途，想了解再看官方的文件。
`twitter:title`	是	頁面的標題，通常是 `title` 元素的值。
`twitter:description`	否	頁面的介紹。
`twitter:image`	否	縮圖。
`twitter:image:alt`	否	縮圖的描述。

具體看參考資料第 5 點。

這邊提一下一些偵錯工具（抓取工具）：

facebook：https://developers.facebook.com/tools/debug/?__mref=message_bubble
LINE：https://poker.line.naver.jp/
X (twitter)：https://cards-dev.twitter.com/validator

網站的 viewport

viewport 的意思是可視區域。一般來說我們在自動產生新的 HTML 文件的時候，都會發現它已經自動幫我們添加上去了，就如同下面的程式碼那樣，可想而知這個設定的重要性。

<meta name="viewport" content="width=device-width, initial-scale=1" />

可以清楚的看到 name 的值是 viewport，content 的值是由半型逗號（,）隔開的，下面是它的一些設定值：

width：

控制可視區域用的。值可以是正整數（1 到 10000）或是device-width（100vw 的意思）。
height：

控制可視區域用的。值可以是正整數（1 到 10000）或是device-height（100vh 的意思）。
initial-scale：

控制首次進入頁面時的縮放級別。值可以是 0.1 到 10（預設 1）。
minimum-scale：

控制頁面上允許的縮小程度。值可以是 0.1 到 10（預設 0.1）。
maximun-scale：

控制頁面上允許的放大程度。值可以是 0.1 到 10（預設 10）。
user-scalable：

控制是否允許在頁面上執行放大和縮小操作。預設是 1。

值說明
0、no 不允許。不建議，因為違反 WCAG 的可訪問性原則。
1、yes 允許。

值	說明
`0`、`no`	不允許。不建議，因為違反 WCAG 的可訪問性原則。
`1`、`yes`	允許。

interaction-widget：

指定互動式 UI 小工具（如虛擬鍵盤）在頁面可視區域上的效果。

值	說明
`resizes-visual`（預設）	僅調整視覺可視區域大小，而非版面配置可視區域大小。
`resizes-content`	調整視覺可視區域和版面配置可視區域的大小。
`overlays-content`	不調整任何可視區域大小。

網站的圖示

這個圖示就是瀏覽器頁籤文字旁邊的 icon。

<link rel="icon" href="favicon.ico" type="image/x-icon" />

現在的瀏覽器如果有在網站根目錄放 favicon.ico 的檔案，就算你不加這個，它也會自動處理的。

不過隨著時代的快速發展，不只這一種圖示需要考慮，還有所謂的 apple-icon，我就不特別講了，想了解可以看參考資料第 7 點。

嵌入 CSS

<link rel="stylesheet" href="main.css" />

可以透過上面的方式添加 CSS 樣式表，這是比較好的做法。當然你也可以如下面的程式碼一樣透過直接在 head 元素裡面使用 style 元素透過添加 style 屬性的方式來書寫樣式，不過不推薦。

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p style="color: red;">Lorem...</p>
    </body>
</html>

嵌入 JavaScript

<script src="main.js"></script>

可以透過上面的方式添加 JavaScript 程式碼，這是比較好的做法。也可以如下面的程式碼一樣直接書寫。

<script>
	console.log('這樣也可以');
</script>

script 這個元素可以在 head 裡面，也能在 body 內，是個比較靈活的元素。

它可以有幾個屬性：

async：

布林屬性。告訴瀏覽器是否要使用非同步的方式執行。（如果沒有 src 屬性的話，就不能用這個屬性）
defer：

布林屬性。告訴瀏覽器是否應在 document 解析後，但在觸發 DOMContentLoaded 之前被執行。

type：

屬性	說明
`module`	針對相容 HTML5 的瀏覽器來說，這段程式碼會當成 JavaScript 模組（module）。腳本內容的處理不受 `charset` 與 `defer` 屬性影響。
其它	MIME 類型，通常是 `text/javascript`。

結語

這篇就講 head 了，下一篇講一下路徑的概念。

參考資料

What's in the head? Metadata in HTML - Learn web development | MDN: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
HTML Standard - The meta element: https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-name
網站管理員 - Sharing：https://developers.facebook.com/docs/sharing/webmasters?locale=zh_TW
The Open Graph protocol: https://ogp.me/#types
About Twitter Cards | Docs | Twitter Developer Platform: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards
為 Android 版 Chrome 即將推出的可視區域大小調整行為異動做好準備 | Blog | Chrome for Developers：https://developer.chrome.com/blog/viewport-resize-behavior?hl=zh-tw#viewport_resize_behavior
Configuring Web Applications: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
<script> - HTML：超文本標記語言 | MDN：https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/script