HTML 風格指南
一致、乾淨、整潔的 HTML 程式碼更易於他人閱讀和理解。
以下是一些建立良好 HTML 程式碼的指南和技巧。
始終宣告文件型別
始終將文件型別作為文件的第一行宣告。
HTML 的正確文件型別是
<!DOCTYPE html>
使用小寫元素名稱
HTML 允許在元素名稱中混合使用大寫和小寫字母。
然而，我們建議使用小寫元素名稱，因為
- 混合大小寫名稱看起來不好
- 開發者通常使用小寫名稱
- 小寫看起來更乾淨
- 小寫更容易書寫
好
<body>
<p>這是一個段落。</p>
</body>壞
<BODY>
<P>這是一個段落.</P>
</BODY>關閉所有 HTML 元素
在 HTML 中，您不必關閉所有元素（例如 <p> 元素）。
然而，我們強烈建議關閉所有 HTML 元素，如下所示
好
<section>
<p>這是一個段落.</p>
<p>這是一個段落.</p>
</section>壞
<section>
<p>這是一個段落.
<p>這是一個段落.
</section>使用小寫屬性名稱
HTML 允許在屬性名稱中混合使用大寫和小寫字母。
然而，我們建議使用小寫屬性名稱，因為
- 混合大小寫名稱看起來不好
- 開發者通常使用小寫名稱
- 小寫看起來更乾淨
- 小寫更容易書寫
好
<a href="https://w3schools.tw/html/">訪問我們的 HTML 教程</a>壞
<a HREF="https://w3schools.tw/html/">訪問我們的 HTML 教程</a>始終引用屬性值
HTML 允許屬性值不帶引號。
然而，我們建議引用屬性值，因為
- 開發者通常引用屬性值
- 帶引號的值更容易閱讀
- 如果值包含空格，您必須使用引號
好
<table class="striped">壞
<table class=striped>非常糟糕
這將不起作用，因為值包含空格
<table class=table striped>始終為影像指定 alt、width 和 height
始終為影像指定 alt 屬性。如果影像因故無法顯示，此屬性非常重要。
另外，始終定義影像的 width 和 height。這可以減少閃爍，因為瀏覽器可以在載入影像之前為其保留空間。
好
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">壞
<img src="html5.gif">空格和等號
HTML 允許等號周圍有空格。但無空格更容易閱讀，並且能更好地將實體組合在一起。
好
<link rel="stylesheet" href="styles.css">壞
<link rel = "stylesheet" href = "styles.css">避免長程式碼行
使用 HTML 編輯器時，滾動檢視 HTML 程式碼並不方便。
儘量避免過長的程式碼行。
空行和縮排
不要隨意新增空行、空格或縮排。
為了可讀性，請新增空行來分隔大的或邏輯的程式碼塊。
請新增兩個空格的縮排。不要使用製表符。
好
<body>
<h1>著名城市</h1>
<h2>東京</h2>
<p>東京是日本的首都，是環太平洋火山地震帶和環太平洋火山地震帶的一部分，是世界上人口最多的都市圈。</p>
<h2>倫敦</h2>
<p>倫敦是英格蘭的首都。它是英國人口最多的城市。</p>
<h2>巴黎</h2>
<p>巴黎是法國的首都。巴黎地區是歐洲人口最多的地區之一。</p>
</body>
壞
<body>
<h1>著名城市</h1>
<h2>東京</h2><p>東京是日本的首都，是環太平洋火山地震帶和環太平洋火山地震帶的一部分，是世界上人口最多的都市圈。</p>
<h2>倫敦</h2><p>倫敦是英格蘭的首都。它是英國人口最多的城市。</p>
<h2>巴黎</h2><p>巴黎是法國的首都。巴黎地區是歐洲人口最多的地區之一。</p>
</body>
良好的表格示例
<table>
<tr>
<th>姓名</th>
<th>描述</th>
</tr>
<tr>
<td>A</td>
<td>A 的描述</td>
</tr>
<tr>
<td>B</td>
<td>B 的描述</td>
</tr>
</table>
良好的列表示例
<ul>
<li>倫敦</li>
<li>巴黎</li>
<li>東京</li>
</ul>
切勿省略 <title> 元素
<title> 元素在 HTML 中是必需的。
頁面標題的內容對搜尋引擎最佳化 (SEO) 非常重要！搜尋引擎演算法使用頁面標題來決定在搜尋結果中對頁面進行排序的順序。
<title> 元素
- 定義瀏覽器工具欄中的標題
- 當頁面新增到收藏夾時提供頁面的標題
- 在搜尋引擎結果中顯示頁面的標題
因此，請儘量使標題儘可能準確和有意義：
<title>HTML 風格指南和編碼約定</title>
省略 <html> 和 <body>？
HTML 頁面在沒有 <html> 和 <body> 標籤的情況下也可以驗證。
示例
<!DOCTYPE html>
<head>
<title>頁面標題</title>
</head>
<h1>This is a heading</h1>
<p>這是一個段落。</p>
自己動手試一試 »
但是，我們強烈建議始終新增 <html> 和 <body> 標籤！
省略 <body> 可能會在舊瀏覽器中產生錯誤。
省略 <html> 和 <body> 也可能導致 DOM 和 XML 軟體崩潰。
省略 <head>？
HTML <head> 標籤也可以省略。
瀏覽器會將 <body> 之前的所有元素新增到預設的 <head> 元素中。
示例
<!DOCTYPE html>
<html>
<title>頁面標題</title>
<body>
<h1>This is a heading</h1>
<p>這是一個段落。</p>
</body>
</html>
自己動手試一試 »
然而，我們建議使用 <head> 標籤。
關閉空的 HTML 元素？
在 HTML 中，關閉空元素是可選的。
允許
<meta charset="utf-8">
也允許
<meta charset="utf-8" />
如果您期望 XML/XHTML 軟體訪問您的頁面，請保留結束斜槓（/），因為它在 XML 和 XHTML 中是必需的。
新增 lang 屬性
您應該始終在 <html> 標籤內包含 lang 屬性，以宣告網頁的語言。這旨在幫助搜尋引擎和瀏覽器。
示例
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>頁面標題</title>
</head>
<body>
<h1>This is a heading</h1>
<p>這是一個段落。</p>
</body>
</html>
自己動手試一試 »
元資料
為了確保正確解釋和正確的搜尋引擎索引，語言和字元編碼 <meta charset="charset"> 都應在 HTML 文件中儘早定義。
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>頁面標題</title>
</head>
設定視口
視口是使用者可見的網頁區域。它隨裝置而異 - 在手機上比在電腦螢幕上小。
您應該在所有網頁中包含以下 <meta> 元素
<meta name="viewport" content="width=device-width, initial-scale=1.0">
這會給瀏覽器指令，告知如何控制頁面的尺寸和縮放。
width=device-width 部分將頁面的寬度設定為與裝置的螢幕寬度一致（這將因裝置而異）。
initial-scale=1.0 部分設定了瀏覽器首次載入頁面時的初始縮放級別。
這是一個沒有視口 meta 標籤的網頁示例，以及同一個網頁有視口 meta 標籤的示例。
提示：如果您正在用手機或平板電腦瀏覽此頁面，可以點選下面的兩個連結來檢視差異。
HTML 註釋
短註釋應寫在一行上，如下所示
<!-- 這是一個註釋 -->
跨越多行的長註釋應這樣寫
<!--
這是一個長註釋示例。這是一個長註釋示例。
這是一個長註釋示例。這是一個長註釋示例。
-->
為了便於觀察，長註釋應縮排兩個空格。
使用樣式表
連結到樣式表時，請使用簡單的語法（type 屬性不是必需的）。
<link rel="stylesheet" href="styles.css">
短 CSS 規則可以壓縮書寫，如下所示
p.intro {font-family:Verdana;font-size:16em;}
長 CSS 規則應分多行書寫
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
- 將開括號放在選擇器同一行
- 在開括號前使用一個空格
- 使用兩個空格的縮排
- 在每個屬性-值對後使用分號，包括最後一個
- 僅在值包含空格時才使用引號
- 將閉括號放在新行上，不帶前導空格
在 HTML 中載入 JavaScript
載入外部指令碼時，請使用簡單的語法（type 屬性不是必需的）。
<script src="myscript.js">
使用 JavaScript 訪問 HTML 元素
使用“雜亂”的 HTML 程式碼可能會導致 JavaScript 錯誤。
以下兩個 JavaScript 語句會產生不同的結果
使用小寫檔名
某些 Web 伺服器（Apache、Unix）對檔名區分大小寫：“london.jpg”不能訪問為“London.jpg”。
其他 Web 伺服器（Microsoft、IIS）不區分大小寫：“london.jpg”可以訪問為“London.jpg”。
如果您混合使用大寫和小寫，您必須注意這一點。
如果您從不區分大小寫的伺服器遷移到區分大小寫的伺服器，即使是小的錯誤也會破壞您的網站！
為避免這些問題，請始終使用小寫檔名！
副檔名
HTML 檔案應具有 .html 副檔名（.htm 也允許）。
CSS 檔案應具有 .css 副檔名。
JavaScript 檔案應具有 .js 副檔名。
.htm 與 .html 有何區別？
.htm 和 .html 副檔名之間沒有區別！
任何 Web 瀏覽器和 Web 伺服器都會將兩者視為 HTML。
預設檔名
當 URL 末尾未指定檔名時（例如“https://w3schools.tw/”），伺服器會新增一個預設檔名，如“index.html”、“index.htm”、“default.html”或“default.htm”。
如果您的伺服器僅配置了“index.html”作為預設檔名，則您的檔案必須命名為“index.html”，而不是“default.html”。
但是，伺服器可以配置多個預設檔名；通常您可以設定任意數量的預設檔名。
