[Day 14] HTML 元素 id 的規則與使用 - 嘗試 30 日寫文充版挑戰

前言 - Prologue

嘗試寫 30 天文充實版面 (跳過假日跟特休 ლ(́◕◞౪◟◕‵ლ) ) 更新文章的 Day 14

在現代科技日新月異的世界中，學習程式語言和網頁開發已成為一種大家都想入門的趨勢。當我們開始學習網頁開發時，HTML 應該是我們接觸到的第一個語言。在 HTML 中，id 是一個非常重要的概念，可以用於設置元素的樣式和進行 DOM 操作。

然而，對於 HTML 元素的 id 命名規則卻存在一些疑惑。其中最常見的問題是，id 是否可以使用純數字或以數字開頭的命名方式？本篇文章將會詳細介紹 HTML 的規範以及對這些問題的解答。

正文 - Main text

在 HTML4 規範中，id 屬性的值必須是以字母（A-Z 和 a-z）開頭的字符串，後面可以跟著數字、字母、連字號（-）、底線（_）和句號（.），但是不能以數字或句號開頭，也不能包含空格和其他特殊字符。HTML4 規範的引用如下：

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

HTML5 規範放寬了 id 屬性的命名限制，可以允許以數字或句號開頭，也可以包含更多的 Unicode 字符，但是仍然建議使用英文字符和數字的組合，以保持代碼的可讀性和兼容性。HTML5 規範的引用如下：

The id attribute specifies its element's unique identifier (ID).

There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

在 CSS 中，選擇器使用 id 屬性時，需要在值前加上 "#" 符號，例如：

<!-- HTML -->
<div id="example"></div>

/* CSS */
#example {
  background-color: pink;
}

在 HTML5 中，也可以使用 data-* 屬性來自定義元素的數據屬性，例如：

<!-- HTML -->
<div data-example="123"></div>

/* CSS */
[data-example="123"] {
  background-color: green;
}

總結來說，HTML 元素的 id 命名規則在 HTML4 和 HTML5 中有所不同，但是建議使用英文字符和數字的組合，以保持代碼的可讀性和兼容性。在 CSS 中，使用 id 屬性或 data-* 屬性時，選擇器的寫法也有所不同，需要注意區別。

問答 - Q & A

Q: 但 HTML5 雖然允許 id 以數字或句號開頭，但是 CSS 好像還是會出問題？部分瀏覽器也是？

A: 根據 W3C 的規範，HTML5 確實允許 id 屬性的值以數字或句號開頭。但在 CSS 中，以數字或句號開頭的 id 選擇器可能會出現問題，因為在 CSS 中，以數字開頭的 id 選擇器被視為無效。

此外，在某些瀏覽器中，如果 id 屬性的值以數字開頭，可能會導致無法正確解析該元素。

總而言之，雖然 HTML5 允許 id 屬性的值以數字或句號開頭，但最好還是避免這樣做，以免在使用 CSS 時出現問題。

Q: id 使用數字進行跳轉好像也有問題？

A: 在網頁中若使用數字作為元素的 id 名稱，可能會導致頁面跳轉時出現問題，特別是在某些舊版瀏覽器中。

這是因為瀏覽器會將數字 id 視為 HTML 頁面內的錨點(anchor)，當使用者點擊頁面內的連結時，瀏覽器會優先尋找與錨點相同的元素，而非對應的 id 元素。

因此建議在命名 id 時，真的要盡量避免使用純數字，或是在數字前面加上字母前綴以避免此問題。

參考資料 - Reference

HTML4 規範是由 W3C（World Wide Web Consortium）於 1997 年 12 月發布的，HTML5 規範則是 W3C 於 2014 年 10 月發布的。

[1] HTML 4.01 Specification

https://www.w3.org/TR/html4/

[2] HTML Standard

https://www.w3.org/TR/html5/

延伸學習

[3] The id attribute got more classy in HTML5 · Mathias Bynens https://mathiasbynens.be/notes/html5-id-class

後記 - Epilogue

雖然 HTML5 規範允許使用數字或句號開頭的 id 名稱，但為了避免潛在問題，還是建議盡可能避免使用純數字或句號開頭的id名稱，必要時使用字母前綴。

同時，為了確保網頁的相容性和穩定性，我們也應該遵守 HTML 和 CSS 的規範，避免使用過時或不支援的特性。