HTML 文件架構：DOCTYPE、根元素、檔頭與內容區
HTML 文件架構不難懂，只要分清楚各區塊的作用為何，就不會有誤用的情況發生了。一份 HTML 文件固定由四個部分組成：文件類型宣告、根元素、檔頭與內容區。文件類型宣告決定瀏覽器用標準模式解析，根元素上的 lang 則標示這一頁的語言。
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<!-- 給機器看的資訊 -->
</head>
<body>
<!-- 給使用者看的內容 -->
</body>
</html>文件類型（doctype）
此宣告會在整份文件最上端，它是用來告訴瀏覽器：我是哪一個版本的 HTML！不同的文件宣告，會造成版面上的某些差異性！現階段，Away 將會以 HTML5 為主。
<!DOCTYPE html>DANGER
沒宣告 DOCTYPE 會造成瀏覽器無法預期的行為。
少了這一行，瀏覽器會退回 怪異模式（Quirks Mode），改用早期的解析規則排版，CSS 的盒模型與行高計算都可能跑掉。HTML5 的宣告之所以這麼短，是因為它不再需要指定 DTD 網址，只是單純告訴瀏覽器：請用標準模式解析。
根元素
用來告訴伺服器，這個網站是用 HTML 寫的。此元素會包裹住整個網頁的內容，也被稱為 根元素。
<!DOCTYPE html>
<html>
...
</html>整份文件就是從這裡開始往下展開成 樹狀結構，瀏覽器依此建立 DOM 樹。
lang
lang 屬性指定頁面內容的自然語言。它是 HTML 標籤的一個屬性，用於設定頁面上所有文字的語言。倘若頁面上的部分文字使用不同語言，您可以給環繞文字的元素的語言屬性賦一個不同的值。
<html lang="zh-Hant-TW">
...
</html>en：英文。zh-Hant-TW：臺灣使用的繁體中文。zh-Hant：繁體中文。zh-Hans：簡體中文。
小提醒
規則組成為 語言-字體-地區。
- 語言：全小寫。
- 字體：首字大寫。
- 地區：全大寫。
lang 會影響螢幕閱讀器的發音、瀏覽器的翻譯提示，也是搜尋引擎判斷語系的依據之一，對 SEO 與無障礙都有幫助，別省略它。
檔頭
主要是放置一些給機器運作、搜尋引擎搜尋的爬蟲所看，不是給一般使用者檢視的區塊。
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
...
</head>
</html>常見放在這裡的有 網頁標題 <title>、<meta>、網站圖示 favicon、CSS 樣式 與 JavaScript 程式碼，細節可參考 檔頭區域介紹。
內容區
此區為網頁內容，是網站要給使用者檢視資料的區塊。
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<!-- 給使用者看的內容 -->
</body>
</html>所有看得到的內容都寫在這裡，例如：標題、段落、圖片 與 超連結，完整說明可參考 網頁內容區介紹。
常見問題
DOCTYPE 一定要寫嗎？不寫會怎樣？
一定要寫，而且要放在文件最上面。少了它，瀏覽器會切換到 怪異模式（Quirks Mode），改用早期的解析規則來排版，盒模型與行高的計算都可能跟你預期的不同。
HTML5 的 DOCTYPE 為什麼這麼短？
HTML4 與 XHTML 的宣告需要附上 DTD 網址，用來指定文件要依循哪一份規格。HTML5 不再依賴 DTD，宣告只剩下告訴瀏覽器請用標準模式解析這件事，所以短短一行就夠了。
lang 屬性該填什麼？可以不填嗎？
台灣的繁體中文網站建議填 zh-Hant-TW。它會影響螢幕閱讀器的發音、瀏覽器的翻譯提示與搜尋引擎判斷語系，雖然不填也能顯示，但對 SEO 與無障礙都是扣分。
head 與 body 有什麼不同？
<head> 放的是給機器看的資訊，例如：網頁標題、<meta>、CSS 與腳本，不會直接顯示在畫面上；<body> 放的才是使用者看得到的內容，例如：標題、段落、圖片與連結。
一份文件可以有多個 html 或 body 嗎？
不行。<html> 是整份文件唯一的根元素，<head> 與 <body> 各自也只能有一個，而且順序固定是先 <head> 後 <body>。寫多個時瀏覽器會自行合併或忽略，結果通常不是你要的。
