HTML フォーマッタ
使い方
HTML を入力欄に貼り付けると、タグ階層に応じてインデントが付与され、各要素が独立した行に分割されます。インデント幅は 2 スペースまたは 4 スペースから選べます。
整形のルール
本ツールはタグの開閉でインデント深度を追跡し、各タグを独立した行に出力します。`<br>` `<img>` などの void 要素は閉じタグなしで処理され、`<pre>` `<script>` `<style>` `<textarea>` の中身は内部のフォーマットを保持します。HTML パーサーとして完全ではないので、複雑な属性値や非標準のタグでは結果がずれる可能性があります。
活用シーン
- バンドラ・サーバー出力の minified HTML を読み解きたい場面
- Blog 記事に HTML 抜粋を載せる前に体裁を整える
- DevTools からコピーした HTML をローカルで確認
- テンプレートエンジン（EJS、Handlebars など）の出力サンプル整形
- Email HTML の構造確認
プライバシー
整形処理はすべてブラウザ内で完結します。HTML がサーバーに送信されることはなく、社内テンプレートや個人情報を含む HTML を試す場面でも外部に漏れる経路はありません。
よくある質問
HTML の整形と最小化（minify）は何が違いますか？
整形（beautify）はインデントや改行を加えて HTML を読みやすくする処理で、最小化は空白を削除してファイルを小さくする処理です。本ツールは整形方向のみを行います。逆方向は HTML ミニファイアをご利用ください。
社内テンプレートや個人情報を含む HTML を貼り付けても安全ですか？
はい。整形処理はすべてブラウザ内で完結し、HTML が端末の外に出ることはありません。アップロード・記録・保存は一切なく、社内テンプレートや個人情報を含む内容もローカルに留まります。
<pre> や <script> の中身は保持されますか？
はい。<pre>、<script>、<style>、<textarea> の内部はそのまま保持されるため、埋め込まれたコードや整形済みテキストが再インデントされたり崩れたりすることはありません。
整形結果が時々わずかにずれるのはなぜですか？
本ツールは完全な HTML パーサーではなく、タグの開閉を追跡する方式です。そのため複雑な属性値や不正なマークアップ、非標準のタグではインデントがずれる場合があります。<br> や <img> などの void 要素は閉じタグなしで正しく処理されます。
インデント幅は選べますか？
はい。2 スペースと 4 スペースを切り替えられます。各要素はネストの深さに応じて独立した行に配置されます。