我們將從語法與結構差異談起，解釋 XHTML 為何如此嚴謹，以及不同瀏覽器對兩種語言的相容性現況與演進歷史。接著提供HTML 與 XHTML 範例程式碼做比較，分享實用開發建議並列出常見錯誤排查對照，最後以模擬新手問答單元回答初學者最關心的幾個問題。透過本指南，您將對 HTML 與 XHTML 有更清晰、立體的認識，寫出更穩健的前端程式碼。
語法與結構差異：嚴謹 vs. 寬容
HTML 與 XHTML 在語法規則、文件結構以及對錯誤的寬容度上存在顯著差異。以下以條列重點方式比較兩者的具體不同：
標記語言基礎：HTML 是基於 SGML（標準通用標記語言）的應用，對語法錯誤相對寬容；XHTML 則是基於 XML（可延伸標記語言）的應用，要求文件格式良好（well-formed）。這表示 XHTML 文件必須完全符合 XML 語法規則，不允許任何結構錯誤。
大小寫敏感度：XHTML 區分大小寫，所有元素（標籤）和屬性名稱都必須使用小寫字母。例如，在 XHTML 中 <div> 和 <DIV> 被視為不同標籤，因此只能使用 <div> 正確表示；相反地，HTML 不區分大小寫，<DIV> 或 <div> 在一般瀏覽器中都會被當作 <div> 對待。
標籤閉合規則：在 HTML 中，有些元素允許省略結束標籤或自行閉合，例如 <br>、<img> 可以直接單獨出現，列表項 <li> 的閉合標籤有時也可省略，瀏覽器仍會嘗試正確解析；但在 XHTML 中所有標籤都必須明確閉合。空元素（沒有內容的標籤）要麼以自閉合語法結尾（例如 <br />、<img src="..." alt="..." />），要麼必須有對應的結束標籤（例如可以寫成 <hr></hr>）。任何標籤沒有正確閉合，XHTML 解析器都會視為致命錯誤。
元素巢狀與結構：XHTML 文件必須遵守嚴格的巢狀結構。所有元素需要正確嵌套，不可交錯重疊。例如不能出現 <p>段落 <em>強調文字</p></em> 這種交錯結構。在 HTML (特別是舊版 HTML4) 中，瀏覽器往往會容忍並自行更正這類結構錯誤，但在 XHTML 環境下，這將導致解析失敗。換言之，HTML 容許較「隨性」的寫法，而 XHTML 要求絕對工整的結構。
屬性語法：HTML 對屬性的書寫比較寬鬆，允許某些值省略引號，甚至允許屬性最小化（attribute minimization）。例如在 HTML 可以寫 <input type=checkbox checked>，瀏覽器會理解 checked 屬性為真。而在 XHTML 中，所有屬性值都必須加引號，且不允許省略屬性值。以上例子必須寫成 <input type="checkbox" checked="checked" /> 才符合 XHTML 規範。同樣地，XHTML 不接受屬性值缺省，像 selected、disabled 這類布林屬性都需要寫成 selected="selected"、disabled="disabled" 才算有效。
文件型態宣告（DOCTYPE）：兩者在文件開頭的 DOCTYPE 宣告有所不同。HTML5簡化了 DOCTYPE，只需一行 <!DOCTYPE html> 就能啟用標準模式。傳統 HTML4/XHTML1 則需使用完整的 DOCTYPE 宣告（包含 DTD 資訊）。例如 HTML4.01 Strict 有一長串 DOCTYPE，XHTML1.0 Strict 也有對應的 DOCTYPE。值得注意的是，在 HTML 中正確的 DOCTYPE 不僅用於宣告標準，還用來觸發瀏覽器的標準模式或相容模式（quirks mode）；而在 XHTML（以 XML 方式提供）中，即使沒有 DOCTYPE，瀏覽器也會以標準模式渲染，因為 XHTML 默認就要求嚴格遵循標準。
錯誤處理與容錯性：HTML 解析器非常寬容，即便有語法錯漏（缺少閉合標籤、忘記引號等），大多數瀏覽器會嘗試推斷開發者意圖並盡可能呈現頁面內容。這種「容錯」機制讓許多不完美的 HTML 頁面仍能運作。而 XHTML 解析採用 XML 規則，對錯誤零容忍。任何語法錯誤（例如一個未關閉的標籤、屬性值缺引號、或是文字中出現未轉義的 & 符號）都會導致所謂的「黃屏死神」現象——瀏覽器直接停止解析並拋出錯誤訊息，頁面將無法正常渲染。換句話說，HTML 類似一位包容的老師，允許犯小錯但仍讓你通過；XHTML 則像嚴厲的檢查員，一處出錯就當場打回。
Script 和樣式處理：在傳統 HTML 中，<script> 和 <style> 元素的內容被視為原樣文本，瀏覽器不會把其中的 &、< 當成標記解析，因此開發者可以直接在其中書寫 JS 或 CSS 而無須特別處理特殊字元。然而在 XHTML (XML 環境) 中，<script> 和 <style> 的內容會被視為純文字資料(PCDATA)，特殊符號必須轉義，否則將被當成 XML 標記的一部分而產生錯誤。通常的解決方式是將這些內容包裹在 <![CDATA[ ... ]]> 區段中，以便包含原生的 &、< 等符號。例如：
<script type="text/javascript">
<![CDATA[
// 在這裡可以寫原生 JS 代碼，包括符號 < & 等
console.log("XHTML script content");
]]>
</script>
如上所示，<![CDATA[ ]]> 讓瀏覽器在 XML 解析時忽略裡面的特殊字元。相對地，在 HTML 中不需要這樣做（甚至把這段 CDATA 語法放在 HTML 裡，瀏覽器會把它當註釋看待）。因此使用 XHTML 時，開發者需要格外注意在 script、style 中合法地包含特殊符號或採用外部檔案，以避免解析錯誤。
命名空間與擴充性：由於 XHTML 本質上是 XML 應用，支援 XML 命名空間。這意味著可以在 XHTML 文件中混合其他基於 XML 的標記（例如 SVG、MathML 等），各自以命名空間區分，不會彼此衝突。例如 <svg:svg>...<svg:svg> 可以內嵌在 XHTML 中。而標準 HTML（特別是過去的 HTML4）對此並沒有原生支援。現代的 HTML5 雖然引入了對 SVG、MathML 的直接支援，但依然不是透過 XML 命名空間的方式實現，而是 HTML 規範自身擴充了這些語言。總的來說，XHTML 在語言擴充上更符合 XML 生態，但 HTML5 已透過其他方式實現了類似目的。
以上差異使得 XHTML 的語法更嚴謹、格式更統一，有利於程式自動處理和長期維護；而 HTML 的靈活性讓開發初期更寬鬆容錯、上手較簡單。可以說，XHTML 要求開發者嚴格遵守規範，而 HTML 把這份辛苦留給了瀏覽器來容忍。
瀏覽器相容性：現況與歷史演進
理解 HTML 與 XHTML 的差別後，我們來看看瀏覽器對兩者的支援情況以及相關的歷史背景。
早期瀏覽器時代
在 2000 年代初期，W3C 發布 XHTML 1.0 標準時，期待未來的網頁都轉向 XML 格式。然而當時的主流瀏覽器（尤其是微軟的 Internet Explorer 6/7/8）對 XHTML 並不友好。Internet Explorer 很長一段時間不支援 application/xhtml+xml 這種 XML 網頁的 MIME 類型。若你將 XHTML 頁面正確地以 XML 格式提供 (Content-Type: application/xhtml+xml)，IE6-8 會直接下載檔案或顯示錯誤，根本無法渲染。為了兼容當時龐大的 IE 用戶群，許多開發者退而求其次，選擇將 XHTML 網頁以 text/html MIME 類型輸出（就像一般 HTML 那樣）。這樣一來，IE 能夠解析頁面，但實際上瀏覽器是用HTML模式在處理，等於把 XHTML 當成了 HTML 來解析。W3C 甚至在 XHTML 1.0 規範的附錄中提供了這種退讓方案，方便開發者漸進採用 XHTML。然而，這種做法也削弱了 XHTML 嚴謹語法的意義：因為一旦以 text/html 提供，瀏覽器就不會以 XML 規則嚴格檢查語法錯誤，開發者依舊可以寫出容錯的「假 XHTML」。
Firefox 與早期現代瀏覽器
相比之下，Firefox、Opera 等較新興的瀏覽器在 2000 年代中期開始全面支援 XHTML 的 XML MIME 類型。它們能夠正確解析並渲染符合 XHTML 規範的頁面。如果 XHTML 文件有任何違反 XML 語法的地方，這些瀏覽器會丟出嚴重錯誤（黃底黑字的錯誤訊息頁），提醒開發者修正。Firefox 等還強制 XHTML 文檔全站使用標準模式來呈現版面，不會進入怪異模式(Quirks Mode)。因此在符合標準的情況下，XHTML 頁面的排版應該在不同瀏覽器之間更加一致。
IE9 之後的改善
微軟直到 2011 年推出 IE9 瀏覽器，才首度基本支援 XHTML 的 XML 解析。IE9+ 能夠理解 application/xhtml+xml，讓真正的 XHTML 在新版 IE 上也能正常運作。這意味著從 IE9 開始，主流瀏覽器對 XHTML 的原生支援變得普遍。但回顧此時，距離 XHTML 1.0 發布已超過十年，網頁開發界的趨勢也發生了變化。
HTML5 崛起
由於 XHTML 在推廣上遭遇種種阻礙（瀏覽器支援不齊、對開發者過於嚴苛等），網頁標準的發展路線在 2000 年代末出現重大轉向。WHATWG 社群提出了 HTML5，重新延續傳統 HTML 的路線，同時吸收了 XHTML 提倡的良好習慣（比如語意化標記、結構嚴謹）並新增了大量現代功能。HTML5 兼容既有的 HTML 慣例，訂定了解析容錯規則，使瀏覽器在標準模式下也能統一處理先前版本的各種怪異語法；同時 HTML5 也允許（但不強制）開發者採用與 XHTML 相似的嚴謹寫法。值得一提的是，HTML5 其實定義了兩套語法：一套是我們熟知的HTML語法（供 text/html 環境使用），另一套是XHTML語法（供 XML 環境使用），也被稱為 XHTML5。如果願意，你完全可以用符合 XHTML 規範的方式撰寫 HTML5 文件，並以 application/xhtml+xml 提供給瀏覽器，這樣的文件既是有效的 HTML5，也是有效的 XML —— 稱為「polyglot (雙用) 文件」。不過大多數網站仍以傳統的 text/html 模式提供內容。
現今的相容性現況
截至 2025 年，主流瀏覽器（Chrome、Firefox、Safari、Edge 等）幾乎全部支援 XHTML 的 XML 模式。除了非常老舊的 IE 6-8 幾乎已絕跡，絕大部分使用者的瀏覽器都可正常解析 XHTML 文件。然而，業界對 XHTML 的熱情已大不如前——由於 HTML5 提供了足夠功能且開發體驗更友好，大多數新專案直接採用 HTML5。XHTML 更嚴謹的語法反而在實踐中被視為「有點多餘」：因為只要開發者願意，也能在 HTML5 裡遵守相同的規範（例如一樣閉合所有標籤、使用小寫、加上引號），但遇到小失誤時瀏覽器不至於整頁崩潰。在特殊情境下 XHTML 仍有用武之地，例如某些需要和其他 XML 資料（如 SVG、數據交換）無縫整合的應用，或是要求極高的代碼嚴謹性的專案。不過對一般網站開發而言，HTML5 是目前的事實標準，相容性最好、社群支持也最廣。
歷史總結：HTML 與 XHTML 的「拉鋸戰」本質上是網頁世界對靈活性與嚴格性的一次博弈。瀏覽器廠商和開發者最終選擇了更平衡的 HTML5 路線：保留 HTML 對錯誤的寬容，同時引入現代化的結構和語法建議。XHTML 作為一個階段性的產物，雖然沒有成為主流，但它推動了網頁標記更嚴謹的風氣，許多良好規範後來也融入了 HTML5。如今我們撰寫 HTML5 時，如果也遵循 XHTML 的嚴謹風格，實際上能得到更乾淨的代碼，同時又不擔心瀏覽器相容問題，何樂而不為呢？
HTML vs XHTML 範例代碼比較
文字描述或許抽象，讓我們直接看看一段 HTML 和 XHTML 程式碼的對比範例。以下，我們建立一個內容相同的簡單網頁，分別用傳統 HTML5 語法和 XHTML 1.0 語法來編寫。請注意兩者在語法上的不同點：
HTML5 範例（寬鬆語法）
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>範例頁面 - HTML5</title>
</head>
<body>
<h1>歡迎光臨</h1>
<p>這是一段介紹文字，沒有閉合 p 標籤會怎樣？
<br>
<img src="picture.webp" alt=範例圖片>
</body>
</html>
上述 HTML 程式碼中有幾處「刻意為之」的疏漏或簡化：
- 第二個 <p> 標籤沒有明確閉合，就直接插入了 <br> 和 <img>。
- <img> 的 alt 屬性值沒有加引號。
- 文件型態宣告使用了簡潔的 <!DOCTYPE html>（HTML5 標準），瀏覽器會據此進入標準模式。
如果在現代瀏覽器中開啟這段 HTML，您會發現它依然可以正常渲染：段落文字會照常顯示，換行和圖片也會出現。瀏覽器的 HTML 解析器會自動補上遺漏的 </p>，並將缺少引號的 alt 屬性解析為合法值。也就是說，這段碼雖然不嚴格，但在 HTML 環境下「看起來沒問題」。
XHTML 1.0 範例（嚴謹語法）
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-Hant" xml:lang="zh-Hant">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>範例頁面 - XHTML 1.0</title>
</head>
<body>
<h1>歡迎光臨</h1>
<p>這是一段介紹文字，所有標籤都會正確閉合。</p>
<br />
<img src="picture.webp" alt="範例圖片" />
</body>
</html>
這份 XHTML 範例則遵守了嚴格的語法：
- <p> 段落有明確的閉合 </p>。
- 空標籤 <br>、<img> 皆以 /> 自閉合，並且 img 的 alt 屬性值加上了引號。
- <html> 標籤聲明了 XML 命名空間 xmlns="http://www.w3.org/1999/xhtml"，還使用了 xml:lang 屬性（這在 XHTML 中用於指明語言，與 lang 屬性一起提供，以兼容某些 XML 工具的需求）。
- 文件頭的 meta 聲明 content-type 為 application/xhtml+xml，字符集 UTF-8。（在 XHTML 中，其實更推薦直接透過伺服器的 HTTP Header 宣告編碼，但此處為了示範寫在文件內）
- 使用了 XHTML 1.0 Strict 的 DOCTYPE 定義，引入對應的 DTD。
如果將這份 XHTML 檔案以 application/xhtml+xml MIME 類型在瀏覽器中打開，任何一處語法不符合 XML 規則，都會導致頁面解析失敗。例如，如果您移除上例中的任何一個閉合斜線 /，或漏掉引號，瀏覽器將直接呈現錯誤訊息而不是正常頁面。可以嘗試在支持 XHTML 的瀏覽器（如 Chrome、Firefox）中載入這份文件來體驗差異。
範例小結：我們可以看到，同樣的內容，用 HTML5 語法可以寫得更簡潔隨意，而用 XHTML 語法則必須面面俱到、毫無差池。對於初學者，前者顯然更寬鬆友好，但後者雖然嚴格，卻保證了文件的結構正確和標準一致。瞭解兩者差異後，您可以在開發中取長補短：即便寫的是 HTML，也盡量養成 XHTML 那樣良好的習慣，減少瀏覽器背後替你"擦錯"的機會。
實用建議與常見錯誤排查
掌握了理論知識，下面我們從實際開發角度提供一些建議，並列舉 HTML/XHTML 常見問題的排查對策。這部分將幫助您在寫程式碼時避開陷阱，快速找到錯誤原因。
開發實用建議
- 新項目選擇適當規範：一般網站開發建議直接使用 HTML5。它是現行標準，支援度高、社群資源豐富。而 XHTML 可視專案需求採用：例如需要與其他 XML 資料格式高度整合時，再考慮 XHTML 或 XHTML5。簡而言之，大部分情況下 HTML5 已足夠，除非您明確需要 XML 的嚴格模式或功能。
- 嚴謹編碼好處多：即使採用 HTML5，遵循嚴謹的編碼風格仍是好習慣。強烈建議您在 HTML 中也始終閉合標籤、使用小寫、為屬性加引號。這些做法讓文件更易讀、減少瀏覽器修復錯誤的負擔，也為日後可能的 XHTML 轉換做好準備。對團隊協作而言，統一的程式碼風格更利於維護。
- 驗證與測試：善用HTML/XHTML 驗證工具（如 W3C Markup Validator），在開發過程中定期檢查頁面是否有語法錯誤。特別是如果您書寫 XHTML，驗證器能及早發現未閉合標籤、未轉義字元等問題，避免上線後出現空白頁的窘境。同時，在不同瀏覽器測試頁面是必要步驟：確保您的頁面在需支援的瀏覽器下都能正常運作（例如檢查 XHTML 是否誤用至不支援的老舊瀏覽器）。
- 合理運用 MIME 類型：如果您決定使用 XHTML，務必確認伺服器正確送出 Content-Type: application/xhtml+xml，且目標用戶瀏覽器能支援。反之，若以 HTML 為主，不要隨意使用 XML 的 MIME 類型提供，否則會導致不必要的解析風險。同一網站中混用兩種模式時也要小心配置，確保每個頁面都以正確的方式提供，避免讓瀏覽器誤用錯誤的解析器。
- 注意 XML 特殊字元：在編寫 XHTML（或任何 XML）時，務必留意特殊字元的轉義。最常見的是文字中的 & 符號必須寫成 &；小於號 < 若非用於標籤也應轉成 <。HTML 下有時您直接寫 AT&T 可能還能正常顯示，但在 XHTML 中忘了把 & 改寫，檔案將無法通過解析。養成隨時轉義的習慣，有需要可查詢完整的 HTML/XML 實體列表。
常見錯誤對照與排除
以下列出開發者經常碰到的錯誤情境，以及在 HTML 和 XHTML 環境中的表現差異，並提供排除方法：
錯誤一：漏閉合標籤
HTML 中的表現：瀏覽器通常自動補全缺失的閉合標籤，頁面多半仍能正常顯示，只是在 DOM 結構上瀏覽器會做出調整。例如忘了關閉 <p> 標籤，瀏覽器會在後續遇到新的段落或區塊元素時假設前一段落結束，您可能在開發者工具裡看到瀏覽器自作主張地插入了 </p>。
XHTML 中的表現：解析將立即失敗。瀏覽器會呈現 XML 錯誤訊息（黃底紅字提示第幾行有錯），用戶將只看到空白頁。
排除方法：檢查錯誤訊息指示的行數，補上相應的閉合標籤。養成編寫時即時閉合的習慣，可利用現代 IDE/編輯器的自動補全功能減少遺漏。
錯誤二：屬性值缺少引號
HTML 中的表現：大多情況下瀏覽器仍能解析該屬性，但可能將後續的空白視為屬性值的一部分或忽略屬性。比如 <img src=logo.webp alt=公司Logo>，瀏覽器可能勉強理解 alt 的值是"公司Logo"，但如果值中間有空格就麻煩了（如 alt=公司 Logo 可能被切成兩個屬性）。
XHTML 中的表現：解析失敗，與漏標籤一樣嚴重。瀏覽器提示 XML 格式錯誤，因為在 XML 規則中屬性值必須用引號括起。
排除方法：一律為屬性值添加英文引號（雙引號或單引號皆可，但要成對）。如果錯誤訊息難以定位，引號問題通常可以透過代碼檢視迅速發現，注意看是否有 = 後缺少引號的情況。
錯誤三：特殊符號未轉義
HTML 中的表現：視瀏覽器而定，有時會將非法的 & 等符號當作普通文字對待（特別是在 HTML5 下，解析器對某些未轉義的 & 有一定容忍度），但也可能造成解析混亂甚至導致瀏覽器誤判 HTML 結構。
XHTML 中的表現：絕對無法通過解析。例如在 XHTML 中寫了 AT&T 沒有把 & 改成 &，解析器會認為這裡在啟動一個無效的實體，屬於致命錯誤。
排除方法：搜索文件中的 &, < 等符號，將純文本中的 & 改寫為 &，< 改為 <，> 改為 >，引號可用 "（雙引號）或 '（單引號）等。通常 XML 錯誤訊息也會提示是哪個符號沒處理好。良好的做法是在模板或輸出資料時，使用工具函式自動轉義特殊字元，避免遺漏。
錯誤四：使用過時或未支援的元素/屬性
HTML 中的表現：如果使用了舊版 HTML 才有的標籤（例如 <center>、<font>）或隨意亂寫一個不存在的標籤，瀏覽器大多會忽略未知標籤但顯示其中內容，或以預設方式呈現（如 <center> 在新標準中沒有，但瀏覽器仍會套用置中的效果為了相容）。
XHTML 中的表現：XHTML1.0 嚴格模式下不允許使用已淘汰的元素，驗證時會報錯。但更大的問題是，如果您任意創造未定義的標籤，雖然在 XML 結構上它未必造成解析錯（XML 容許任意名稱的標籤），但該標籤沒有定義在 DTD 中，頁面在嚴格意義上就不是一個有效的 XHTML1.0 文件，瀏覽器可能依然渲染內容但這破壞了標準的一致性。
排除方法：了解您使用的 HTML/XHTML 規範所支援的元素集合，避免使用已廢棄的標記。如果是需要自定義標籤，考慮使用 HTML5 的自定義元素（需 JavaScript 定義其行為），或者在 XHTML 中定義自己的 XML 命名空間。總之，不要隨意在嚴格模式下插入未知的標記。善用線上驗證工具，可發現這類問題。
錯誤五：XHTML 在舊瀏覽器中顯示空白
表現：這其實不是代碼錯誤，而是兼容性問題 —— 當您正確撰寫了一個 XHTML 網頁並以 application/xhtml+xml 提供，但使用 IE8 或更舊的IE開啟時，只會看到下載提示或空白頁。
原因：IE8- 等老舊瀏覽器不支援 XHTML 的 MIME 類型，因此無法辨識內容，選擇不呈現。
解決方式：如果必須支援這類舊瀏覽器，最簡單的做法是退回以 text/html 提供，或乾脆使用 HTML4/HTML5 編寫。此外也有進階方案是檢測 User-Agent 後對老瀏覽器提供替代版本，但隨著這些瀏覽器幾近絕跡，大可不必費心。總之，了解目標受眾所使用的瀏覽器，決定是否適合使用 XHTML 是很重要的。
以上列舉的只是常見狀況的一部分。在開發中，遇到任何奇怪的頁面錯誤，請回頭檢查語法是否符合您所用規範。HTML 的錯誤可能不易被察覺（因為瀏覽器默默替您修正了），但長期而言，養成嚴謹的編碼習慣能減少 hidden bugs，這也是 XHTML 精神帶給我們的寶貴經驗。
常見問題與解答 (Q&A)
最後，我們準備了一個模擬 Q&A 問答單元，針對初學者常提出的疑惑提供清晰解答，希望進一步鞏固您對 HTML 與 XHTML 差異的理解。
總結
經過上述的講解與範例，相信您已對 HTML 與 XHTML 在語法規範、結構嚴謹性以及瀏覽器相容性上有了深入的理解。總而言之，兩者沒有誰絕對「更好」，而是適應不同的開發需求與歷史背景。對初學者而言，掌握現代 HTML5 的同時汲取 XHTML 的嚴謹精華，您將寫出既兼容廣泛又品質上乘的網頁程式碼。希望這份指南能在您日後的開發旅程中提供實用的參考與指引，Happy coding!
