2025 iThome 鐵人賽

DAY 4

Modern Web

前端迷走中：從零開始的新手之路系列第 4 篇

[Day 04] 看不見的頭──HTML的<head>裡裝了什麼？

17th鐵人賽前端迷走中

團隊好想工作室 v 9.0

2025-09-18 16:35:26

74 瀏覽

分享至

今天要回過頭來，仔細看看網頁的<head>元素裡面有什麼。

之前說過，<head>元素裡會放入有關網頁的metadata。這些metadata會再放入<title>、<link>、<style>、<script>、<base>、<meta>等元素之中。

各種metadata皆有其對應的元素，需要依其類別判斷要使用哪種。因此，接下來會分別介紹這些元素是什麼。

`<title>`元素

<title>元素定義了網頁的標題。我們平常在瀏覽器分頁中看到的標題就是透過這個元素來設定。這個標題也是使用搜尋引擎時看到的網頁名稱，或是將網頁新增至書籤時的預設名稱。

由上述日常經驗可以知道，網頁的標題非常重要，編輯HTML檔案時要避免省略掉<title>元素。不然除了使用者體驗不佳，也會影響到SEO。即便沒有省略掉，也要幫網頁取個好名字，才會吸引人點閱。

需要注意的是，若在<title>元素裡面放入了HTML標籤，則這些標籤也會被當作純文字來處理。[1]

`<link>`元素

<link>元素用來定義網頁引用的外部資源與網頁之間的關係，像是網頁圖示或是網頁使用的樣式表。
使用<link>元素時通常會設定rel與屬性href屬性。
前者表示relationship，即外部資源之於網頁的關係；後者為Hypertext Reference的縮寫，用於設定要去哪裡尋找這個外部資源。href屬性值可以是絕對路徑，也可以是相對路徑。[2]

設定網頁圖示

下列程式碼設定了網頁的圖示。其中rel的屬性值為icon，表示這個外部資源是網頁的圖示。href的屬性值只填入圖示的檔名，表示該網頁圖示的檔案跟網頁本身的HTML檔案放在同一個資料夾（或說目錄）。

<link rel="icon" href="favicon.ico" />

設定網頁使用的外部樣式表

如果要以外部的CSS檔案來設定網頁的樣式，也需要透過<link>元素來達成，如下列程式碼所示。其中rel的屬性值設定為stylesheet，表示外部資源是網頁使用的樣式表。

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

其他類型的外部資源

在網頁圖示跟外部樣式表之外，HTML還定義了其他類型的外部資源，可以參考MDN。

`<style>`元素

除了透過外部的CSS檔案設定網頁的樣式，也可以直接將CSS的程式碼寫在<style>元素。<style>元素必須包在<head>元素裡面。

雖然網頁的樣式可以透過<style>元素設定，但通常會建議把CSS程式碼存入外部的檔案，再以<link>引入網頁。[3]

關於CSS，之後會再多做說明。這邊就先暫時帶過～

`<script>`元素

<script>元素通常是用來置入要在網頁中執行的Javascript程式碼。
與CSS類似，Javascript程式碼可以存放於外部檔案再引入網頁，或是直接寫在網頁裡面。但不同的是，添加Javascript程式碼的兩種方式都是透過<script>元素來達成。[4]

如果要引入外部的Javascript檔案，需要以src屬性設定檔案路徑：

<script src="my-js-file.js"></script>

如果要直接將Javascript程式碼寫在網頁裡面，則直接在<script>元素之中寫出需要的程式碼就好：

<script>
  alert("Hello World!");
</script>

Javascript程式碼的執行時機

引入外部的Javascript檔案時，可以加上async、defer等屬性以設定Javascript程式碼的執行時機。兩者皆為布林屬性。

如果沒有加上async或defer屬性，則瀏覽器載入網頁到一半時就會先暫停解析HTML，等Javascript程式碼加載並執行完後，才會繼續解析HTML。
如果加上async屬性，則會在解析HTML的同時加載Javascript程式碼。等到加載完後就會暫停解析HTML，轉而執行這些程式碼。等執行完後，才會繼續解析HTML。值得注意的是，如果同時引入多個Javascript檔案並加上async，會無法確定這些檔案之間的執行順序，而可能產生錯誤。
如果加上defer屬性，則會在解析HTML的同時加載Javascript程式碼。但這些程式碼會等到HTML都解析完後才開始執行。[5]

由於在HTML還未解析完之前就執行Javascript程式碼可能導致錯誤，通常會設定成HTML解析完才開始執行這些程式碼。
如果要直接在網頁中添加Javascript程式碼，通常會將<script>元素放在<body>元素內部的尾端。
而如果是要引入外部Javascript檔案，則通常會將<script>元素放在<head>裡面，並為<script>元素添加defer屬性。[6]

`<base>`元素

<base>元素用於設定HTML檔案中所有相對URL的基礎URL，以及瀏覽器開啟網頁內文中的連結等的預設方式。[7]
其常用的屬性有href與target屬性，前者設定基礎URL，後者設定開啟連結等的預設方式。使用<base>元素時，至少必須為<base>元素設定其中一種屬性。
如果HTML檔案裡有多個<base>元素，則基礎URL會由第一個具有href屬性的<base>元素來設定。同樣的，開啟連結等的預設方式會依據第一個具有target屬性的<base>元素來設定。

關於絕對URL與相對URL的差別，可以先參考MDN。或許之後幾天會再多做說明～

`<meta>`元素

無法由<title>、<link>、<style>、<script>、<base>等元素表達的metdata，會透過<meta>元素來設定。由於種類繁多，這邊只會介紹常見的幾種。
多數的<meta>元素都會有name跟content屬性。前者說明這個<meta>元素是關於什麼的metadata，後者則表示這個metadata的內容是什麼。[8]

charset

透過<meta>的charset屬性，可以設定HTML檔案採用的字元編碼。通常會將charset的值設定為UTF-8，以避免產生錯誤。[9]

<meta charset="utf-8" />

viewport

viewport是網頁內容在瀏覽器視窗中的顯示範圍。通常網頁的大小會跟viewport不同，因此需要透過捲軸查看網頁在顯示區域之外的其他內容。[10]viewport的大小跟瀏覽網頁的裝置有關，為了讓網頁在手機跟平板電腦也能有好的觀看體驗，便需要透過<meta>進行相關設定。

以下程式碼出自我們在第二天建立的空白網頁。width=device-width表示viewport的寬度設成與裝置同寬，會依據不同裝置而變化。initial-scale=1.0表示網頁初次載入時的縮放層度為1。

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

author

<meta>元素也可以用來說明網頁的作者是誰。由以下程式碼可知，該網頁的作者是豆芽。

<meta name="author" content="豆芽" />

description

透過<meta>元素設定description這個metadata，可以簡單描述網頁的內容。在搜尋引擎看到的網頁介紹跟這個metadata有關，但通常會經由搜尋引擎另外改寫。[11]

<meta
  name="description"
  content="The HTML reference describes all elements and attributes of HTML, including global attributes that apply to all elements." />