編寫 HTML 程式碼示例的指南
以下指南涵蓋了如何為 MDN Web Docs 編寫 HTML 示例程式碼。
HTML 程式碼示例的通用指南
選擇格式
關於正確縮排、空格和行長度的看法一直備受爭議。關於這些話題的討論會分散建立和維護內容的注意力。
在 MDN Web 文件中，我們使用 Prettier 作為程式碼格式化程式，以保持程式碼風格一致（並避免離題討論）。您可以查閱我們的 配置檔案 以瞭解當前規則，並閱讀 Prettier 文件。
Prettier 格式化所有程式碼並保持風格一致。然而，還有一些額外的規則需要您遵循。
完整的 HTML 文件
注意：本節中的指南僅適用於需要顯示完整 HTML 文件的情況。通常，程式碼片段足以演示一個功能。當使用 EmbedLiveSample 宏時，只需包含 HTML 程式碼片段；它將在顯示時自動插入到完整的 HTML 文件中。
文件型別
您應該使用 HTML5 doctype。
<!doctype html>
文件語言
使用 lang 屬性在 <html> 元素上設定文件語言。
<html lang="en-US"></html>
這有利於可訪問性和搜尋引擎，有助於內容本地化，並提醒人們使用最佳實踐。
文件字元集
您還應該像這樣定義文件的字元集
<meta charset="utf-8" />
除非有非常充分的理由，否則應使用 UTF-8；它幾乎可以滿足您文件中使用任何語言的所有字元需求。
視口 meta 標籤
最後，您應該始終將視口 meta 標籤新增到 HTML 的 <head> 中，以使程式碼示例在移動裝置上更有可能正常工作。您應該在文件中至少包含以下內容，並且可以根據需要稍後進行修改。
<meta name="viewport" content="width=device-width" />
有關更多詳細資訊，請參閱 <meta name="viewport">。
屬性
您應該將所有屬性值放在雙引號中。儘管 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" />
MDN 上的大小寫約定
所有不區分大小寫的構造都使用小寫，包括 doctype 宣告、元素名稱以及屬性名稱/值。這可以建立一致的外觀，並加快標記編寫速度。
<p class="nice">This looks nice and neat</p>
<P CLASS="WHOA-THERE">Why is my markup shouting?</P>
類和 ID 名稱
使用語義化的類/ID 名稱，並使用連字元（kebab case）分隔多個單詞。不要使用 camel case。例如
<p class="editorial-summary">Blah blah blah</p>
<p class="bigRedBox">Blah blah blah</p>
字元引用
不要不必要地使用 字元引用 — 儘可能使用字面字元（您仍然需要轉義尖括號和引號等字元）。
例如，您可以只寫
<p>© 2018 Me</p>
而不是
<p>© 2018 Me</p>
HTML 元素
關於在 MDN Web Docs 上編寫 HTML 元素有一些規則。遵守這些規則可以產生對元素及其元件的一致描述，並確保正確連結到詳細文件。
- 元素名稱：使用
HTMLElement宏，它會建立一個連結到該元素的 MDN Web Docs 頁面。例如，編寫{{HTMLElement("title")}}會生成 "<title>"。如果您不想建立連結，請**將名稱括在尖括號中**並使用“Inline Code”樣式（例如，<title>）。 - 屬性名稱：使用“Inline Code”樣式將屬性名稱放在
code font中。此外，當屬性與解釋其功能的說明相關聯時，或者當它在頁面上首次使用時，請將其設定為粗體。 - 屬性值：使用“Inline Code”樣式將
<code>應用於屬性值，除非程式碼示例的語法需要，否則不要在字串值周圍使用引號。例如，“當<input>元素的type屬性設定為email或tel時……”