HTML 註解：單行、多行寫法與使用時機

註解是會被瀏覽器忽略，並且不會被使用者看到的，它們存在的目的是要讓您得以在原始碼中說明您的原始碼是如何運作的、每段原始碼的作用等等。它也常用來暫時停用某段內容，但檢視原始碼就看得到，不能拿來藏敏感資訊。

一般註解

此為常用的註解方式。

<!-- 這裡是單行註解 -->

<!--
這裡是多行註解
這裡是多行註解
這裡是多行註解
這裡是多行註解
-->

註解由 <!-- 開始、--> 結束，中間不論放幾行文字，瀏覽器在解析 HTML 文件 時都會直接跳過，因此不會出現在畫面上，也不會建立成 DOM 節點。

小提醒

在 VS Code 中按下 Ctrl + /（macOS 為 Cmd + /），可以把游標所在行或選取範圍快速切換成註解。

註解的常見用途

說明區塊的用途

在較長的頁面中，用註解標出各區塊的起訖，維護時一眼就能找到位置：

<!-- 導覽列開始 -->
<nav class="site-nav">...</nav>
<!-- 導覽列結束 -->

暫時停用某段內容

除錯時想暫時拿掉某段內容，又不想真的刪掉，就把它包進註解裡：

<!-- <img src="./banner.jpg" alt="活動 banner"> -->

註解的限制

不可巢狀

註解遇到第一個 --> 就結束了，剩下的內容會被當成一般 HTML 元素 解析：

<!-- 外層 <!-- 內層 --> 這裡會被顯示出來 -->

避免連續的連字號

連續的 -- 在註解中屬於不合法的寫法，想畫分隔線請改用其他符號：

<!-- ❌ 不建議 ---------- -->

<!-- ✅ 建議 ========== -->

註解不是保險箱

註解不會顯示在畫面上，但會 原封不動地留在原始碼裡，任何人按下檢視原始碼都看得到。密碼、API 金鑰、後台網址這類資訊千萬別寫進註解。

條件式註解

此註解方式主要是針對 IE 瀏覽器特定版本使用，由於近年來 IE 瀏覽器已經式微，因此，不特別解說。

<!--[if lt IE 9]>
  這段只有 IE9 以前的版本看得到
<![endif]-->

IE10 之後已不再支援這個語法，IE 本身也已退場，新專案不需要再寫它。

常見問題

HTML 註解的內容使用者看得到嗎？

畫面上看不到，但註解會原封不動地出現在網頁原始碼裡，任何人按下檢視原始碼都讀得到。所以密碼、金鑰、內部網址這類敏感資訊絕對不能寫在註解中。

HTML 註解可以巢狀嗎？

不行。註解在遇到第一個 --> 時就結束了，外層剩下的內容會被當成一般 HTML 解析，畫面上就會冒出你以為已經註解掉的東西。

註解裡可以寫連續兩個連字號嗎？

建議避開。連續的 -- 在註解中屬於不合法的寫法，容易讓解析結果與預期不同，需要分隔線時改用 = 或 * 比較安全。

註解會影響網頁效能或 SEO 嗎？

搜尋引擎不會把註解內容視為網頁內容，因此對排名沒有幫助也沒有傷害。註解只會讓檔案變大一點點，正式環境通常會由打包工具自動移除。

還需要寫 IE 條件式註解嗎？

不需要。條件式註解只有 IE9 以前的版本支援，IE10 之後已經失效，IE 本身也已停止支援，現在寫它只是多餘的程式碼。

延伸閱讀

元素的組成：標籤、屬性與內容HTML 文件架構：DOCTYPE 與 head、body什麼是 HTML？標記語言入門VS Code：入門教學與快捷鍵