HTML 巢狀檢查器

✅ HTML Nesting Checker

Check HTML tag nesting and balance in your browser — catch unclosed or misnested tags.

📐 工作原理與說明
檢查 HTML 標籤的閉合與巢狀是否正確。
  • 規則:標籤必須正確閉合,且不能交叉巢狀(<b><i></b></i> 非法)。
  • 可選閉合:HTML5 中 <li>、<p>、<td> 等結束標籤可省略,解析器會自動閉合。
  • 空元素:<img> <br> <input> 等 void 元素不需要結束標籤。
  • 後果:巢狀錯誤會觸發瀏覽器糾錯,產生與預期不同的 DOM 結構。

📚 深度解析:HTML 巢狀檢查器

💡 常見使用場景

檢查
`<p><div></div></p>` → 提示 p 內不應有 div。

❓ 常見問題(FAQ)

瀏覽器為何能渲染?
瀏覽器會容錯修復,但結構不規範。
瀏覽器自動糾錯有什麼風險?
風險在於「糾錯結果和你預期不一致」:<p> 裡出現 <div> 時瀏覽器會提前閉合 p,後續內容被移出,CSS 後代選擇器與 JS 的 DOM 查詢都會失配;table 內混入非法子元素則可能被移出表格。這類問題在 Chrome 與 Firefox 下的修復方式還可能不同。

📊 結果解讀

結果含義

HTML 巢狀檢查指出標籤是否被正確閉合與合法巢狀(如 <p> 不能包含塊級 <div>)。結果列出錯誤位置與型別。

用途

用於排查渲染異常、SEO 結構與可訪問性(a11y)問題;修正後頁面在不同瀏覽器表現更一致。