HTMLフォーマッター
HTMLコードを整形して、読みやすく整理された形式に変換します
入力
出力
主な機能
- •HTMLコードの自動インデントと整形
- •タグの適切な配置と階層構造の整理
- •エラー検出と分かりやすいエラーメッセージ
- •ワンクリックでコピー機能
- •フォーマットされたHTMLのダウンロード機能
使用方法
- 1.左側のテキストエリアにHTMLコードを入力または貼り付けます
- 2.「フォーマット」ボタンをクリックします
- 3.右側のテキストエリアに整形されたHTMLが表示されます
- 4.必要に応じて整形されたコードをコピーして使用できます
よくある質問
エラーがある場合でも整形されますか？
js-beautify ライブラリは「タグの閉じ忘れ」「属性のクオート抜け」など軽微なエラーは自動補完して整形します。HTMLは構造的に寛容なため、ブラウザで表示できる程度のエラーであれば整形可能です。ただし極端に壊れたマークアップは整形結果が崩れることがあるため、整形後は必ず目視確認してください。
インデント幅を変更できますか？
本ツールは2スペースインデントで固定です。タブインデントや4スペースが必要な場合は、整形結果をエディタにペーストし、エディタの「インデント変換」機能（VSCode の "Convert Indentation to Tabs" 等）で一括変換するのが効率的です。Prettier や IDE側の整形機能と併用することで柔軟に対応できます。
スタイルやスクリプトタグ内のコードは保持されますか？
はい、`<style>` ブロックと `<script>` ブロックの内容はそのまま保持され、ブロック自体のインデントのみ調整されます。CSSやJavaScript本体は変更されないため、安全に整形できます。CSSや JS の中身まで整形したい場合は <a href="/tools/css-minifier">CSS圧縮ツール</a> や <a href="/tools/javascript-beautifier">JavaScriptビューティファイアー</a> を併用してください。
JavaScriptコードも整形されますか？
本ツールはHTML構造の整形に特化しており、`<script>` タグ内のJavaScriptコード本体は基本的なインデント補正のみ行われます。本格的なJS整形・フォーマットは <a href="/tools/javascript-beautifier">JavaScriptビューティファイアー</a> をご利用ください。Prettier・ESLint・IDEの保存時整形機能でも代替できます。
空行は削除されますか？
過度な連続空行（3行以上）は1〜2行に削減されますが、HTML文書の可読性を保つために必要な改行は保持されます。例: ブロック要素間の意図的な空行、`<head>` と `<body>` 間のセクション区切りなど。コメントブロック前後の改行も維持されます。
HTMLとXHTMLは同じ扱いですか？
本ツールはHTML5を前提に整形しますが、XHTML（自己終了タグ `<br />` `<img />`）も問題なく整形可能です。ただし出力形式は HTML5 風（`<br>` `<img>`）になることがあるため、XHTMLが必須の環境（古いXMLパーサー等）では整形後に手動修正が必要です。
本ツールは何のライブラリを使っていますか？
内部で <code>js-beautify</code> ライブラリ（Apache 2.0 / MIT デュアルライセンス）を使用しています。これは Atom / VS Code の HTML整形機能の元となっているライブラリで、Web標準に準拠した整形ロジックを提供します。すべてブラウザ内で実行され、サーバーへの送信は一切ありません。
プライバシーは保護されますか？
はい。すべての整形処理はお使いのブラウザ内で完結し、HTMLコードがst0z.comのサーバーや第三者に送信されることはありません。社外秘のWebアプリのテンプレート、未公開の制作物のHTMLも安全に整形できます。