HTML 風格指南

什麼是 HTML 中的風格指南？

在 HTML 中，風格指南是一套規則和約定，用於定義如何編寫和格式化程式碼。它有助於確保編寫的程式碼具有可讀性、易於理解和修改。風格指南還有助於避免可能影響網頁功能和外觀的常見錯誤和缺陷。在本教程中，我們將介紹建立更好的 HTML 程式碼最重要的風格指南。

以 HTML5 文件型別宣告開始

所有 HTML 和 XHTML 文件都應以 `<!DOCTYPE html>`宣告開始。請注意，此宣告不區分大小寫。這是強制執行完整標準模式（也稱為非怪異模式）所必需的，以提供更一致的網頁渲染效果。它是 W3C 描述的最新 Web 標準，並被現代 Web 瀏覽器的佈局引擎使用。

示例

<!DOCTYPE html>
<html>
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <!-- Content inside body tag -->
   Hello, Welcome to Tutorialspoint
</body>
</html>

指定文件語言

始終使用 `lang` 屬性指定文件語言。此屬性在 HTML 文件根部的 `<html>` 開標籤中定義。指定文件語言將有助於輔助功能、語音分析、翻譯和其他功能。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <!-- Content inside body tag -->
   Hello, Welcome to Tutorialspoint
</body>
</html>

定義字元集

W3C 始終建議開發者顯式宣告字元集或字元編碼。這可以透過使用 `<meta>` 標籤的 `charset` 屬性來完成。將 UTF-8 作為值傳遞給 charset 屬性，因為它是最常用的字元編碼，並提供超過一百萬個字元。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset = "UTF-8">
</head>
<body>
   <!-- Content inside body tag -->
   Hello, Welcome to Tutorialspoint
</body>
</html>

元素和屬性使用小寫

不要將元素名稱、屬性名稱和屬性值大寫。在 Java、C 和 C++ 等其他程式語言中，開發者通常使用駝峰式命名法或蛇形命名法來宣告變數名。但是，對於編寫 HTML 程式碼，W3C 建議使用小寫字母。這樣做將增強 HTML 程式碼的清晰度和可讀性。

示例

<body>
   <h1>
      <!-- Heading comes here -->
   </h1>
   <p style = "font-size: 25px; ">
      <!-- contains paragraph -->
      Hello, Welcome to Tutorialspoint
   </p>
</body>

為屬性值新增引號

根據 W3C 的建議，最好將屬性值用雙引號括起來。這對於包含空格的值很重要，因為如果沒有引號，HTML 可能無法正確解析它們。使用雙引號比單引號更常見。但是，我們也可以使用單引號。

<p style = "font-size: 25px; ">
   <!-- contains paragraph -->
</p>

使用閉合標籤

在 HTML 中，所有元素都必須正確關閉，即使某些元素具有可選的閉合標籤。請注意，某些元素是自閉合的，包括 `<img>`、`<hr>`、`<br>`等等。

示例

<!DOCTYPE html>
<html>
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <h1>
      <!-- Heading comes here -->
   </h1>
   <p>
      <!-- contains paragraph -->
   </p>
   <br>
   <p>
      <!-- contains paragraph -->
      Hello, Welcome to Tutorialspoint
   </p>
</body>
</html>

使用正確的縮排

使用正確的縮排可以顯示 HTML 程式碼的結構和層次結構。使用空格而不是製表符進行縮排，並且每級使用一致的空格數（通常是兩個或三個）。此外，我們可以使用空行來分隔大型程式碼塊。

示例

<!DOCTYPE html>
<html>
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <h1>
      <!-- Heading comes here -->
   </h1>
   <p>
      <!-- contains paragraph -->
   </p>
   <p>
      <!-- contains paragraph -->
      Hello, Welcome to Tutorialspoint
   </p>
</body>
</html>

設定視口

設定視口有助於網頁在不同的裝置上良好渲染。這是透過控制頁面的寬度和比例來實現的。它用於確保特定網頁的響應性。

<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">

添加註釋

我們使用註釋來解釋特定 HTML 程式碼的目的或功能。註釋應以 `` 結束。避免將註釋用於樣式或指令碼目的。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <h1>
      <!-- Heading comes here -->
   </h1>
   <p>
      <!-- contains paragraph -->
      Hello, Welcome to Tutorialspoint
   </p>
</body>
</html>

列印頁面