如果說 <body> 是網頁的「身體」（使用者看得到的部分），那麼 <head> 就是網頁的「大腦」（使用者看不到，但控制著網頁如何運作與呈現）。
在 <html> 標籤內，我們通常將網頁分為兩大區塊：<head> 與 <body>。這篇文章將帶你深入了解這個負責處理資訊、設定與外部連結的關鍵區域。
一、 它是什麼？
<head> 標籤是一個容器，用來包裹關於網頁的 元數據 (Metadata)。所謂的元數據，就是「關於資料的資料」。這些資訊不會直接顯示在網頁的畫面上，但對於瀏覽器渲染頁面、搜尋引擎索引內容，以及社群媒體分享預覽來說，卻是絕對必要的。
二、 <head> 裡面通常裝什麼？
一個標準的現代網頁，<head> 裡通常包含以下幾種關鍵元素：
1. 編碼宣告：<meta charset="UTF-8">
這是最重要的一行！它告訴瀏覽器這份文件使用 UTF-8 字元編碼。
- 功能：支援幾乎所有人類語言的文字顯示。
- 重要性：如果你漏了這行，中文網頁很有可能會變成一堆看不懂的「亂碼」或問號。
2. 網頁標題：<title>
這是唯一一個會「顯示」給使用者看，但卻不在頁面內容中的元素。
- 功能：顯示在瀏覽器的分頁標籤上。
- 重要性：它是搜尋引擎（如 Google）搜尋結果標題的主要來源，對 SEO 影響巨大。
3. 視窗設定：<meta name="viewport" ...>
這是現代響應式網頁（RWD）的基石。
- 典型寫法：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 功能：告訴手機瀏覽器「不要把網頁縮小」，而是要依照裝置的寬度來排版。沒有它，網頁在手機上會變成縮得很小的電腦版畫面。
4. 外部資源連結：<link>
用來連結檔案以外的資源。
- CSS 樣式表：
<link rel="stylesheet" href="style.css">，負責網頁的「化妝」。 - Favicon (網頁圖示)：
<link rel="icon" href="favicon.ico">，顯示在網頁標題旁的小圖示。
5. 腳本載入：<script>
用來載入 JavaScript 程式碼。
- 雖然為了效能，我們常把
<script>放在<body>的底部，但某些需要在頁面渲染前執行的設定（如 Google Analytics 分析碼），通常還是會放在<head>中。
6. SEO 與社群分享：<meta>
讓網頁在搜尋結果和 Facebook/LINE 分享時更具吸引力。
- 描述 (Description)：
<meta name="description" content="網頁的摘要說明..."> - OG 標籤 (Open Graph)：
<meta property="og:image" content="cover.jpg">，設定分享到社群時的預覽圖片。
三、 常見誤區：什麼不該放進去？
初學者最常犯的錯誤，就是在 <head> 裡面寫內容標籤。
- ❌ 錯誤：在
<head>裡寫<h1>、<p>或<div>。 - ✅ 正確：所有要讓使用者「看到」的文字、圖片、按鈕，請通通放在
<body>裡面。
瀏覽器雖然很聰明，看到你在 <head> 寫了 <h1> 可能會幫你修復並顯示出來，但這可能會破壞 DOM 結構，導致 JavaScript 或 CSS 選取器失效，是非常不好的習慣。
四、 總結範例
一個健康且標準的 <head> 結構通常長這樣：
<head>
<!-- 1. 編碼 (防止亂碼) -->
<meta charset="UTF-8">
<!-- 2. 視窗設定 (手機版友善) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 3. 網頁標題 (瀏覽器分頁與搜尋結果) -->
<title>我的個人部落格 | 程式學習筆記</title>
<!-- 4. SEO 描述 -->
<meta name="description" content="這是關於 HTML 學習過程的紀錄與分享...">
<!-- 5. 載入 CSS 樣式 -->
<link rel="stylesheet" href="style.css">
</head>
理解 <head>，就是理解網頁如何與瀏覽器及搜尋引擎「溝通」。雖然使用者看不見這裡的運作，但這裡的設定決定了網頁的基礎體質！
