編寫 HTML 程式碼示例指南
以下指南涵蓋了如何為 MDN Web 文件編寫 HTML 示例程式碼。
HTML 程式碼示例的一般指南
選擇格式
關於正確縮排、空格和行長的意見一直存在爭議。關於這些主題的討論分散了建立和維護內容的注意力。
在 MDN Web 文件中，我們使用 Prettier 作為程式碼格式化程式，以保持程式碼風格的一致性（並避免跑題的討論）。您可以查閱我們的 配置檔案 以瞭解當前規則，並閱讀 Prettier 文件。
Prettier 格式化所有程式碼並保持樣式一致。但是，您還需要遵循一些其他規則。
完整的 HTML 文件
注意：本節中的指南僅在您需要顯示完整的 HTML 文件時適用。通常，程式碼片段足以演示一項功能。當使用 EmbedLiveSample 宏 時，只需包含 HTML 程式碼片段；它將在顯示時自動插入完整的 HTML 文件中。
文件型別宣告
您應該使用 HTML5 文件型別宣告。它簡短、易於記憶且向後相容。
<!doctype html>
文件語言
文件字元集
您還應該像這樣定義文件的字元集
<meta charset="utf-8" />
除非您有充分的理由不使用 UTF-8，否則請使用它；它幾乎可以滿足所有字元需求，無論您在文件中使用哪種語言。
視口元標記
最後，您應該始終將視口元標記新增到 HTML <head> 中，以便程式碼示例更有可能在移動裝置上正常工作。您應該至少在文件中包含以下內容，並在需要時稍後修改
<meta name="viewport" content="width=device-width" />
有關更多詳細資訊，請參閱 使用視口元標記控制移動瀏覽器上的佈局。
屬性
您應該將所有屬性值放在雙引號中。由於 HTML5 允許省略引號，因此省略引號很誘人，但如果您包含引號，則標記會更整潔且更易於閱讀。例如，這更好
<img src="images/logo.jpg" alt="A circular globe icon" class="no-border" />
…比這
<img src=images/logo.jpg alt=A circular globe icon class=no-border>
省略引號也可能導致問題。在上面的示例中，alt 屬性將被解釋為多個屬性，因為沒有引號指定“A circular globe icon”是一個單獨的屬性值。
布林屬性
不要為布林屬性包含值（但要為 列舉 屬性包含值）；您可以只寫屬性名稱來設定它。例如，您可以編寫
<input required />
這完全可以理解並且可以正常工作。如果存在布林 HTML 屬性，則其值為 true。雖然包含值可以工作，但沒有必要且不正確
<input required="required" />
大小寫
對所有元素名稱和屬性名稱/值使用小寫，因為它看起來更整潔，這意味著您可以更快地編寫標記。例如
<p class="nice">This looks nice and neat</p>
<P CLASS="WHOA-THERE">Why is my markup shouting?</P>
類和 ID 名稱
字元引用
不要不必要地使用 字元引用 — 在可能的情況下使用文字字元（您仍然需要轉義諸如尖括號和引號之類的字元）。
例如，您可以只寫
<p>© 2018 Me</p>
而不是
<p>© 2018 Me</p>
HTML 元素
在 MDN Web 文件上編寫有關 HTML 元素有一些規則。遵守這些規則可以生成元素及其元件的一致描述，並確保正確連結到詳細文件。
-
元素名稱：使用
HTMLElement宏，它會建立一個指向該元素的 MDN Web 文件頁面的連結。例如，編寫{{HTMLElement("title")}}會生成“<title>”。如果您不想建立連結，請將名稱括在尖括號中並使用“內聯程式碼”樣式（例如，<title>）。 -
屬性名稱：使用“內聯程式碼”樣式將屬性名稱放在
程式碼字型中。此外，當在與屬性功能說明相關聯時或在頁面上首次使用時，請將它們放在粗體中。 - 屬性值：使用“內聯程式碼”樣式將
<code>應用於屬性值，並且不要在字串值周圍使用引號，除非程式碼示例的語法需要。例如，“當<input>元素的type屬性設定為email或tel時...”。