HTML程式碼美化格式化

把擠在一起的標籤展開成可讀層級

HTML 格式化會調整原始碼中的縮排與換行，讓父子標籤和文件區塊更容易辨認。將完整文件或 HTML 片段貼入後，可產生重新排版的文字結果，再複製或下載。它處理的是程式碼的呈現方式，不會替你檢查標籤是否符合規範，也不會修補錯誤結構、執行安全掃描或檢查無障礙與瀏覽器相容性。

例如，單行的 <section><h2>標題</h2><p>內容</p></section> 可以整理成多行，讓 h2 與 p 的巢狀關係更清楚。文字和屬性值仍是原始碼內容；格式整齊不等於內容正確。

縮排與換行選項各自控制什麼

格式化模式可選每層縮排 2、4 或 8 個空格，也可改用 Tab。若不同專案有既定風格，請沿用該專案設定；空格數與 Tab 是不同字元，不宜在同一份檔案任意混用。

• 保留換行：開啟時會保留部分原有換行，最多保留有限的連續空行；關閉時由格式化規則重新安排換行。
• 縮排內部 HTML：控制文件內部內容是否再增加一層縮排，預設關閉。
• 自動排版：長屬性或文字不會依固定行寬強制折行，因此某些輸出行仍可能很長。

預設排版使用 2 個空格、保留換行，且不額外縮排內部 HTML。改變這些設定會改變空白排版，不會把標籤或文字翻譯成其他內容。

格式化和壓縮是兩種不同工作

此頁也提供「壓縮」模式，會移除註解並合併多餘空白與標籤間空白，讓原始碼變得緊湊。格式化適合閱讀、檢視結構；壓縮則是精簡文字。壓縮後不適合直接閱讀，而且不能視為經過完整最佳化或品質驗證。請先確認選取的模式，再查看輸出區的字元數與行數。

貼上、調整並取回 HTML

1. 準備文件或片段

   貼上要整理的 HTML，也可先載入頁面提供的範例確認操作方式。空白輸入不會產生有意義的輸出。

2. 選擇處理模式和風格

   要閱讀標籤層級時選「格式化」，再挑選 2、4 或 8 個空格，或選 Tab。依需求開啟保留換行、縮排內部 HTML；要精簡字串則改選「壓縮」。

3. 檢視結果再複製

   對照輸入和輸出，特別留意文字空白、屬性、註解及嵌入內容。確認後可複製結果，或下載輸出檔；重新處理時可清空輸入。

建議先用一小段代表性程式碼試跑，再套用到完整文件。若程式碼屬於團隊專案，使用相同縮排設定有助於避免版本差異只反映排版風格。

使用時常見的判斷

儲存或併入專案前請檢查差異

排版結果只提供閱讀便利，不代表 HTML 有效、安全、無障礙或跨瀏覽器一致，也不能取代專案建置與頁面測試。

• 格式化可能改變空白及換行；若內容包含 pre、textarea、郵件模板、伺服器模板語法或依賴精確文字的測試資料，請逐段核對。
• 壓縮模式會移除 HTML 註解並合併空白；執行前保留原始內容，確認註解或空白沒有被其他流程使用。
• 模板標記混在 HTML 中、標籤不完整或結構異常時，輸出不應當作修復結果。保留原檔並使用專案的編譯與驗證流程確認。
• 不要將密鑰、登入憑證或未公開資料貼入不受信任的環境；複製前也要確認剪貼簿中的內容是預期結果。