HTML 格式規範
雖然 HTML 是一種容錯彈性很大的標記語言，就算格式或語法寫錯還是可以顯示 ( 但結果可能會不如預期 )，但在撰寫語法上仍然要遵照一些格式規範，才能確保產生出正確的顯示結果，未來也才能更有效無誤的串接其他程式語言，這篇文章會介紹 HTML 應該注意的一些格式規範。
快速導覽：
必須要有 <DOCTYPE>
<!DOCTYPE html> 會放在所有 HTML 的開頭，主要定義 HTML 的類型（ doctype )，意思是告訴瀏覽器這份文件是 HTML5 的規範，只要是網頁都需會放入。
<!DOCTYPE html>
<html>
<head>
<title>OXXO.STUDIO</title>
</head>
<body>
<p>我是內容</p>
</body>
</html>
必須要有 <html>、<head>、<body>
<html>、<head>和<body>三個標籤是網頁 HTML 的基本架構，任何一個網頁都必須要包含這三個元素 ( 雖然缺少後可能還能正常顯示，但往往在功能與架構上就會出錯 )。
好的範例：
<!DOCTYPE html> <html> <head> <title>OXXO.STUDIO</title> </head> <body> <h1>OXXO.STUDIO</h1> <p>hello world<p> </body> </html>不好的範例：
<!DOCTYPE html> <h1>OXXO.STUDIO</h1> <p>hello world<p>
HTML 副檔名使用 .html
過去在 HTML 尚未完全普及前，可使用 .htm 的副檔名，但只要是 HTML 檔案，一律存檔為 .html 格式 ( 雖然 .htm 也支援，但相對來說比較不好 )
檔案名稱使用小寫字母
雖然在 HTML 存檔時可以用大小寫命名，例如 Apple.html 和 apple.html，但不同的瀏覽器會有不同的讀取規則，有些瀏覽器會區分檔名的大小寫，有些瀏覽器則會認為是同一個檔案，因此建議檔案名稱一律使用小寫字母，並且避免特殊字元或中文字 ( 因這些文字也會被轉換成字母和數字 )。
替網頁加上語系與編碼規則
編輯網頁 HTML 完成後，可以在 html 標籤裡加上 lang 屬性標記語系，新增 meta 標籤標記編碼規則，如此一來可以提供搜尋引擎和瀏覽器更多資訊 ( 有些瀏覽器甚至會因為語系進行自動切換 )。
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
注意結尾標籤
HTML 裡大多數的元素都具有開頭標籤和結尾標籤，因此撰寫 HTML 時，除了空元素 ( 例如圖片 <img> )，其他元素必須都要加上結尾標籤 ( 雖然在某些情況下也可以正常顯示，但往往會造成整體 HTML 架構錯亂 )。
好的範例：
<h1>OXXO.STUDIO</h1> <p>hello world<p>不好的範例：
<h1>OXXO.STUDIO <p>hello world
標籤和屬性使用小寫字母
HTML 所有元素都是由「標籤」組成，標籤裡的字母 ( 包含屬性名稱 ) 一率使用「小寫」字母 ( 雖然大小寫混用還是可以正常運作，但通常任何一個常寫程式開發者都不會這樣做，這麼做也會造成整體程式碼不容易閱讀，且容易出錯 )。
好的範例：
<h1>OXXO.STUDIO</h1> <p>hello world<p> <a href="https://steam.oxxostudio.tw">steam.oxxostudio.tw</a>不好的範例：
<H1>OXXO.STUDIO</H1> <P>hello world<p> <a HREF="https://steam.oxxostudio.tw">steam.oxxostudio.tw</a>
屬性的值加上引號
撰寫 HTML 元素屬性的「值」，一律需要加上「引號」( 建議雙引號 )，否則除了會讀取不到屬性的值，更會發生值與屬性混淆的狀況。
好的範例：
<p class="content">hello world<p>不好的範例：
<p class=content>hello world<p>
等號前後不要有空白
因為 HTML 元素的屬性使用「空白」分隔，因此在撰寫屬性和值的時候，等號前後不要加上空白。
好的範例：
<p class="content" style="color:red;">hello world<p>不好的範例：
<p class = "content" style = "color:red;">hello world<p>
加上換行與縮排
通常 HTML 都會是「巢狀元素」的結構，將不同「層級」元素「分行」以及加上「縮排」 ( 通常是一個 tab 或兩個空白 )，可以讓整個 HTML 更加容易閱讀理解 ( 詳細參考：HTML 縮排與註解 )。
好的範例：
<body> <p class="content" style="color:red;">hello world<p> <ul> <li>清單 1</li> <li>清單 2</li> </ul> </body>不好的範例：
<body> <p class="content" style="color:red;">hello world<p> <ul><li>清單 1</li><li>清單 2</li></ul> </body>
使用空格、換行和特殊符號需要注意
雖然在 HTML 直接打入內容也可以呈現 ( 在不加上任何標籤的狀況下 )，不過由於 HTML 是「標記語言」，並非「純文字」，因此無法正常顯示一些常見的字元 ( 例如「連續」空格、<標籤>或換行 )，如果要使用，則必須使用對應的標記語言，以下方的程式為例，使用 ( Non-Breaking Space ) 表示空白，以 < 表示 <，> 表示 >， <br/> 表示換行，就能正常顯示內容。
<p>無法連續空白：空白開始 空白結束</p>
<p>連續空白：空白開始 空白結束</p>
<p>無法出現標籤：<span></span></p>
<p>出現標籤：<span></p>
<p>不能換行
不能換行
</p>
<p>
可以換行
<br/>
可以換行
<p>
空元素後方的斜線
HTML 的空元素沒有結尾標籤，因此在原本的標籤後方，不論加上斜線或不加斜線都是允許且常見的語法，需要注意的是，如果一份 HTML 裡所有空元素的結尾都有斜線，那麼就都加上斜線，如果沒有斜線就不要加斜線，盡可能不要混用不同的寫法，例如下面兩種寫法都是被允許的。
沒有斜線
<img src="https://steam.oxxostudio.tw/demo.jpg">有斜線
<img src="https://steam.oxxostudio.tw/demo.jpg" />
小結
由於 HTML 的容錯彈性很大，所以就更需仰賴使用者自己的撰寫習慣，一個具有優良規範的網站，不僅在程式架構的理解上都更為簡便，也更容易與其他的服務與應用搭配。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～