HTML 中的元資料：head 標籤的內容

HTML 文件的頭部是在頁面載入時不會在 Web 瀏覽器中顯示的部分。它包含頁面 <title>、連結到 CSS（如果您選擇使用 CSS 對 HTML 內容進行樣式化）、連結到自定義收藏夾圖示和其他元資料（有關 HTML 的資料，例如作者和描述文件的重要關鍵字）等資訊。Web 瀏覽器使用頭部中包含的資訊來正確地呈現 HTML 文件。在本文中，我們將介紹以上所有內容以及更多內容，以便為您提供一個良好的標記工作基礎。

先決條件	基本 HTML 熟悉，如 HTML 入門中所述。
目標	瞭解 HTML 頭部、其用途、它可以包含的最重要專案以及它對 HTML 文件的影響。

什麼是 HTML 的 head 標籤？

讓我們回顧一下我們在上一篇文章中介紹的簡單 HTML 文件

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

HTML 頭部是 <head> 元素的內容。與 <body> 元素的內容（在瀏覽器中載入時顯示在頁面上）不同，頭部的內容不會顯示在頁面上。相反，頭部的作用是包含有關文件的元資料。在上面的示例中，頭部非常小

html

<head>
  <meta charset="utf-8" />
  <title>My test page</title>
</head>

然而，在較大的頁面中，頭部可能會變得非常大。嘗試訪問一些您最喜歡的網站，並使用開發者工具檢查其頭部內容。我們在這裡的目標不是向您展示如何使用所有可能放在頭部的內容，而是教您如何使用您想要包含在頭部中的主要元素，並讓您有所瞭解。讓我們開始吧。

新增標題

我們已經看到了 <title> 元素的實際應用——這可以用來向文件新增標題。然而，這可能會與 h1 元素混淆，h1 元素用於向您的正文內容新增頂級標題——這有時也稱為頁面標題。但它們是不同的東西！

在瀏覽器中載入時，h1 元素會出現在頁面上——通常應該每個頁面使用一次，以標記頁面的內容標題（故事標題或新聞標題，或適合您使用的任何內容）。
<title> 元素是元資料，代表整個 HTML 文件的標題（而不是文件的內容）。

主動學習：檢查一個簡單的例子

為了開始這個主動學習，我們希望您訪問我們的 GitHub 倉庫並下載 title-example.html 頁面的副本。為此，您可以：
1. 從頁面中複製貼上程式碼到程式碼編輯器中的一個新文字檔案中，然後將其儲存在一個合理的位置。
2. 在 GitHub 頁面上按“原始”按鈕，這將使原始程式碼出現（可能在一個新的瀏覽器選項卡中）。接下來，選擇您瀏覽器的“另存為...”選單，並選擇一個合理的位置儲存檔案。
現在在瀏覽器中開啟檔案。您應該看到類似下面的內容：現在應該很清楚 <h1> 內容出現在哪裡以及 <title> 內容出現在哪裡！
您還應該嘗試在程式碼編輯器中開啟程式碼，編輯這些元素的內容，然後重新整理瀏覽器中的頁面。玩得開心點。

<title> 元素的內容也會以其他方式使用。例如，如果您嘗試將頁面新增書籤（書籤 > 將此頁面新增書籤 或 Firefox 中 URL 欄中的星形圖示），您會看到 <title> 內容作為建議的書籤名稱填充。

A webpage being bookmarked in Firefox. The bookmark name has been automatically filled in with the contents of the 'title' element

<title> 內容也會在搜尋結果中使用，如下所示。

元資料：`<meta>` 元素

元資料是描述資料的 data，HTML 有一個“官方”方式向文件新增元資料——<meta> 元素。當然，我們在這篇文章中討論的其他內容也可以被認為是元資料。頁面<head> 中可以包含許多不同型別的<meta> 元素，但我們不會在此時嘗試解釋所有這些元素，因為這會變得太混亂。相反，我們將解釋一些您可能經常看到的內容，只是讓您有所瞭解。

指定文件的字元編碼

在上面的示例中，包含了這行程式碼

html

<meta charset="utf-8" />

此元素指定文件的字元編碼——文件允許使用的字元集。utf-8 是一個通用字元集，包含幾乎所有來自任何人類語言的字元。這意味著您的網頁能夠處理顯示任何語言；因此，在您建立的每個網頁上設定此選項是個好主意！例如，您的頁面可以很好地處理英語和日語

A web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine.

如果您將字元編碼設定為ISO-8859-1（拉丁字母的字元集），例如，您的頁面呈現可能會出現亂碼

A web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly.

注意：一些瀏覽器（如 Chrome）會自動修復不正確的編碼，因此，根據您使用的瀏覽器，您可能不會看到此問題。您仍然應該在您的頁面上設定utf-8 編碼，以避免在其他瀏覽器中出現任何潛在問題。

主動學習：嘗試字元編碼

要嘗試一下，請重新訪問上一節關於<title> 中獲得的簡單 HTML 模板（title-example.html 頁面），嘗試將 meta charset 值更改為ISO-8859-1，並將日語新增到您的頁面中。這是我們使用的程式碼

html

<p>Japanese example: ご飯が熱い。</p>

新增作者和描述

許多<meta> 元素包含name 和content 屬性

name 指定它是什麼型別的元元素；它包含什麼型別的資訊。
content 指定實際的元內容。

兩個這樣的元元素在您的頁面上包含非常有用，它們定義了頁面的作者，並提供對頁面的簡要描述。讓我們來看一個例子

html

<meta name="author" content="Chris Mills" />
<meta
  name="description"
  content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing websites and applications." />

指定作者在許多方面都有益：如果您對內容有任何疑問並且想聯絡他們，能夠了解誰編寫了頁面非常有用。一些內容管理系統具有自動提取頁面作者資訊並使其可用於此類目的的功能。

指定包含與頁面內容相關的關鍵字的描述很有用，因為它有可能使您的頁面在搜尋引擎中執行的相關搜尋中排名更高（此類活動被稱為搜尋引擎最佳化或 SEO）。

主動學習：描述在搜尋引擎中的使用

描述也會在搜尋引擎結果頁面中使用。讓我們做一個練習來探索這一點

訪問 Mozilla 開發者網路的首頁。
檢視頁面的原始碼（右鍵單擊頁面，從上下文選單中選擇“檢視頁面原始碼”。）

找到描述元標記。它看起來會像這樣（儘管它可能會隨著時間的推移而改變）

html

<meta
  name="description"
  content="The MDN Web Docs site
  provides information about Open Web technologies
  including HTML, CSS, and APIs for both websites and
  progressive web apps." />

現在在您最喜歡的搜尋引擎中搜索“MDN Web Docs”（我們使用了 Google）。您會注意到描述<meta> 和<title> 元素內容在搜尋結果中使用——絕對值得擁有！

注意：在 Google 中，您將在主頁連結下方看到 MDN Web Docs 的一些相關子頁面——這些被稱為網站連結，可以在 Google 站長工具中進行配置——一種使您的網站在 Google 搜尋引擎中的搜尋結果更好的方法。

注意：許多<meta> 功能不再使用。例如，關鍵字<meta> 元素（<meta name="keywords" content="fill, in, your, keywords, here">）——它應該為搜尋引擎提供關鍵字，以確定該頁面對不同搜尋詞的相關性——被搜尋引擎忽略，因為垃圾郵件傳送者只是在關鍵字列表中填寫了數百個關鍵字，從而使結果產生偏差。

其他型別的元資料

當您在網路上四處瀏覽時，您也會發現其他型別的元資料。您在網站上看到的許多功能都是專有的創作，旨在為某些網站（如社交網路網站）提供他們可以使用的一些特定資訊。

例如，Open Graph 資料是一種元資料協議，由 Facebook 發明，為網站提供更豐富的元資料。在 MDN Web Docs 原始碼中，您會發現以下內容

html

<meta
  property="og:image"
  content="https://mdn.club.tw/mdn-social-share.png" />
<meta
  property="og:description"
  content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both websites
and HTML Apps." />
<meta property="og:title" content="Mozilla Developer Network" />

這樣做的一個結果是，當您在 Facebook 上鍊接到 MDN Web Docs 時，該連結會與影像和描述一起顯示：為使用者提供更豐富的體驗。

向您的網站新增自定義圖示

為了進一步豐富您的網站設計，您可以在元資料中新增對自定義圖示的引用，這些圖示將在某些情況下顯示。最常用的圖示是 收藏夾圖示（縮寫為“收藏夾圖示”，指的是它在瀏覽器的“收藏夾”或“書籤”列表中的使用）。

收藏夾圖示已經存在多年。它是第一種此類圖示：一個 16 畫素的正方形圖示，在多個地方使用。您可能會看到（取決於瀏覽器）收藏夾圖示顯示在包含每個開啟頁面的瀏覽器選項卡中，以及書籤面板中的書籤旁邊。

可以透過以下方式將收藏夾圖示新增到您的頁面

將其儲存在與網站首頁相同的目錄中，並以.ico 格式儲存（大多數還支援.gif 或.png 等更常見格式的收藏夾圖示）

在 HTML 的<head> 塊中新增以下行以引用它

html

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

以下是在書籤面板中收藏夾圖示的示例

您可能還需要針對不同的上下文使用不同的圖示。例如，您會在 MDN Web Docs 首頁的原始碼中找到以下內容

html

<link rel="icon" href="/favicon-48x48.[some hex hash].png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.[some hex hash].png" />

這是一種讓網站在儲存到 Apple 裝置的首頁時顯示圖示的方法。您甚至可能想要為不同的裝置提供不同的圖示，以確保圖示在所有裝置上看起來都很好。例如

html

<!-- iPad Pro with high-resolution Retina display: -->
<link
  rel="apple-touch-icon"
  sizes="167x167"
  href="/apple-touch-icon-167x167.png" />
<!-- 3x resolution iPhone: -->
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="/apple-touch-icon-180x180.png" />
<!-- non-Retina iPad, iPad mini, etc.: -->
<link
  rel="apple-touch-icon"
  sizes="152x152"
  href="/apple-touch-icon-152x152.png" />
<!-- 2x resolution iPhone and other devices: -->
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" />
<!-- basic favicon -->
<link rel="icon" href="/favicon.ico" />

註釋解釋了每個圖示的使用目的——這些元素涵蓋了諸如提供用於將網站儲存到 iPad 首頁時的漂亮高解析度圖示之類的事情。

現在不用太擔心實現所有這些型別的圖示——這是一個相當高階的功能，你不需要了解它才能完成課程。這裡的主要目的是讓你知道這些東西是什麼，以防你在瀏覽其他網站的原始碼時遇到它們。如果你想了解更多關於所有這些值以及如何選擇它們的資訊，請閱讀<link>元素的參考頁面。

注意：如果你的網站使用內容安全策略（CSP）來增強其安全性，該策略將應用於網站圖示。如果你遇到網站圖示無法載入的問題，請驗證Content-Security-Policy頭部的img-src指令是否阻止訪問它。

將 CSS 和 JavaScript 應用於 HTML

幾乎所有你在現代使用的網站都會使用CSS來使它們看起來很酷，並使用JavaScript來為互動式功能提供動力，例如影片播放器、地圖、遊戲等等。這些最常使用<link>元素和<script>元素分別應用於網頁。

<link>元素應該始終放在文件的頭部。它需要兩個屬性，rel="stylesheet"，它表示它是文件的樣式表，以及href，它包含樣式表文件的路徑。
html
```
<link rel="stylesheet" href="my-css-file.css" />
```
<script>元素也應該放在頭部，並且應該包含一個src屬性，其中包含要載入的 JavaScript 的路徑，以及defer，它基本上指示瀏覽器在頁面完成解析 HTML 後加載 JavaScript。這很有用，因為它確保在 JavaScript 執行之前所有 HTML 都已載入，這樣你就不會因為 JavaScript 嘗試訪問頁面上尚不存在的 HTML 元素而導致錯誤。實際上，有很多方法可以處理在頁面上載入 JavaScript，但對於現代瀏覽器來說，這是最可靠的一種（對於其他瀏覽器，請閱讀指令碼載入策略）。
html
```
<script src="my-js-file.js" defer></script>
```
注意：<script>元素看起來像一個空元素，但它不是，所以需要一個閉合標籤。除了指向外部指令碼檔案之外，你也可以選擇將指令碼放在<script>元素中。

主動學習：將 CSS 和 JavaScript 應用於頁面

要開始這個主動學習，請獲取我們的meta-example.html、script.js和style.css檔案的副本，並將它們儲存在你本地計算機上的同一目錄中。確保它們以正確的名稱和副檔名儲存。
在瀏覽器和文字編輯器中開啟 HTML 檔案。
按照上面給出的資訊，將<link>和<script>元素新增到你的 HTML 中，以便你的 CSS 和 JavaScript 應用於你的 HTML。

如果操作正確，當你儲存 HTML 並重新整理瀏覽器時，你應該可以看到內容發生了變化。

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

JavaScript 在頁面上添加了一個空列表。現在，當你點選列表之外的任何位置時，會彈出一個對話方塊，要求你輸入新列表項的文字。當你按下“確定”按鈕時，一個包含文字的新列表項將新增到列表中。當你點選現有列表項時，會彈出一個對話方塊，允許你更改該項的文字。
CSS 使背景變為綠色，文字變大。它還對 JavaScript 新增到頁面上的某些內容進行了樣式化（帶有黑色邊框的紅色條是 CSS 新增到 JS 生成的列表的樣式）。

注意：如果你在這個練習中卡住了，無法讓 CSS/JS 應用，請嘗試檢視我們的css-and-js.html示例頁面。

設定文件的主要語言

最後，值得一提的是，你可以（也確實應該）設定頁面的語言。這可以透過在開啟的 HTML 標籤中新增lang 屬性來實現（如meta-example.html中所示，並在下面顯示）。

html

<html lang="en-US">
  …
</html>

這在很多方面都很有用。如果你的 HTML 文件設定了語言，它將被搜尋引擎更有效地索引（例如，允許它在特定語言的結果中正確顯示），並且對使用螢幕閱讀器的視障人士也很有用（例如，“six”這個詞在法語和英語中都存在，但發音不同）。

你還可以將文件的子部分設定為被識別為不同的語言。例如，我們可以將日語部分設定為被識別為日語，如下所示。

html

<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

這些程式碼由ISO 639-1標準定義。你可以在HTML 和 XML 中的語言標籤中找到更多關於它們的資訊。

總結

這標誌著我們對 HTML 頭部的快速瀏覽的結束——你可以在裡面做更多的事情，但一個詳盡的瀏覽在這個階段會很無聊和令人困惑，我們只是想讓你對現在在那裡最常見的東西有一個瞭解！在下一篇文章中，我們將介紹HTML 文字基礎。