HTML 元素參考

HTML 元素是具備語意的建構單位，而不只是標籤。每個元素都有內容模型規則、允許的屬性，以及可能影響版面配置或無障礙功能的瀏覽器行為。

<link> #

<link> 透過 URL 參照外部資源。最重要的屬性包括：

• rel，用來指定關係；
• href，用來指向資源。

樣式表和 preconnect 提示是常見用途：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="/styles.css">

rel 的值具有多重用途，因此在行為不明確時，應參照 IANA link-relations 登錄表進行確認。

<meta> #

<meta> 提供字元編碼、viewport 設定或頁面描述等中繼資料。它通常位於文件 head 中，並經常由瀏覽器、爬蟲或社群分享系統使用。

<noscript> #

<noscript> 為 JavaScript 已停用或不受支援的環境提供後援內容。

適用用途包括：

• 漸進式增強；
• 主題啟動提示；
• 依賴指令碼功能的警告訊息。

<p> #

<p> 元素不能巢狀。如果在一個段落內撰寫另一個段落，瀏覽器會隱含地關閉外層段落。

這項行為很重要，因為即使手寫的 HTML 看起來沒有問題，範本引擎仍可能意外產生無效的巢狀結構。

<p>
  First paragraph.
  <p>Second paragraph.</p>
</p>

瀏覽器會將這段標記改寫為彼此獨立的同層段落。

版面配置與語意 #

元素並非可以互相替換：

• 結構元素定義文件階層；
• 片語元素定義行內內容；
• 圖片和 canvas 等替換元素具有由宿主定義的呈現行為。

使用範本建構頁面時，元素的選擇會同時影響樣式和無障礙功能。語意正確的元素通常能減少後續所需的 CSS 數量。

實務規則 #

將元素視為契約：

1. 檢查允許的內容模型；
2. 檢查必要或具有意義的屬性；
3. 檢查瀏覽器如何修復無效標記。

遵循這項習慣，可以在許多版面配置錯誤到達頁面之前加以防止。