📄 HTMLフォーマッタ（整形・圧縮）
HTMLを貼り付けて、読みやすく整形（タグごとに改行＋インデント）するか、余分な空白・改行を取り除いて圧縮(minify)するかを選べます。インデント幅の切り替え、コメント除去、pre/textarea/script/styleの中身保持に対応。処理はすべてブラウザ内で完結します。
入力と設定
出力
解説
HTMLフォーマッタは、機械的に出力されて1行に詰まったHTMLや、逆に手作業でインデントがばらついたHTMLを、目的に応じて「読みやすい形」または「軽い形」に整え直すツールです。整形モードはタグごとに改行し、開始タグと終了タグの入れ子（ネスト）の深さに応じてインデントを付けて構造を見える化します。圧縮モードはタグの間にある改行やインデント用の空白を取り除き、意味のある内容を保ったまま1行にまとめてファイルサイズを削ります。編集時は整形、配信時は圧縮、と使い分けるのが基本です。
インデント幅はスペース2つ・スペース4つ・タブから選べます。プロジェクトの規約（Prettierやエディタ設定の流儀）に合わせて切り替えてください。整形では、中身がテキストだけの要素（例: <li>項目</li>）は1行にまとめ、子要素を持つ要素だけを改行して階層化します。これにより無駄に縦長にならず、リストや表の見通しが良くなります。br・img・input・meta・link・hr などの空(void)要素は閉じタグを持たないため、勝手に </br> のような閉じタグを増やすことはありません。
整形・圧縮のどちらでも、pre・textarea・script・style の中身は「そのまま」保持します。これらの要素の内部では空白や改行そのものに意味がある（整形コードの見た目、JavaScriptの文字列、CSSの記述、フォーム初期値など）ため、インデントを足したり空白を潰したりすると表示や動作が変わってしまうからです。本ツールはこれらの中身には一切手を加えません。HTMLコメント <!-- --> は既定で残し、圧縮モードでのみ「コメントを除去する」を選べます。
内部では、正規表現ベースの簡易トークナイザでHTMLを「コメント／宣言(DOCTYPE等)／タグ／テキスト」に分割し、順に処理しています。ブラウザのDOMパーサのように欠けたタグを補完したり並べ替えたりはしないため、閉じタグの過不足がある壊れたHTMLでも中身を勝手に書き換えず、best-effort（できる範囲）で整えます。逆に言えば「壊れたHTMLを直す」ツールではありません。あくまで表記の整形・圧縮が目的です。入力・変換・出力はすべて端末内で行い、貼り付けた内容はサーバーに送信されません。
よくある質問
「整形」と「圧縮」はどう使い分けますか？
コードを読んだり編集したりレビューするときは「整形」で改行・インデントを付けると構造が把握しやすくなります。逆に、Webサイトとして配信するときは「圧縮(minify)」で余分な改行・空白を削ると転送量が減り、表示が少し速くなります。開発中は整形、公開時は圧縮、という使い分けが基本です。
void要素（br・img・input など）に閉じタグは付きますか？
付きません。br・img・input・meta・link・hr・area・col・source などの空(void)要素はHTMLの仕様上、閉じタグを持ちません。整形時もこれらを1つの要素として扱い、</br> のような不要な閉じタグを増やしたり、インデントの入れ子を深くしたりしません。
pre・textarea・script・style の中身はどうなりますか？
これらの要素の中身はそのまま保持し、整形も圧縮も行いません。preやtextareaは空白・改行が見た目や初期値そのものになり、scriptのJavaScriptやstyleのCSSは空白を変えると動作や意味が変わる恐れがあるためです。安全のため中身には一切触れず、開始タグ・終了タグの位置だけを整えます。
インデントは何段階から選べますか？
スペース2つ・スペース4つ・タブの3種類から選べます。プロジェクトのコーディング規約やエディタ設定に合わせて選んでください。インデント幅の設定は「整形」モードのときだけ表示されます（圧縮では改行・インデントを取り除くため使いません）。
壊れたHTML（閉じタグ抜けなど）でも使えますか？
使えますが、これは簡易トークナイザによるbest-effort（できる範囲）の整形です。ブラウザのDOMパーサのように欠けたタグを補完したり、要素を並べ替えて正しい構造に直したりはしません。閉じタグの過不足がある場合、インデントの階層が本来の意図とずれることがあります。壊れた構造を「直す」ツールではなく、あくまで表記を整える／詰めるツールとお考えください。
圧縮で表示が変わることはありますか？
通常は変わりませんが、注意点があります。本ツールの圧縮は「改行を含む整形用の空白」を取り除き、行内の意味ありそうな空白は1つ残す方式です。インライン要素（<a>や<span>など）の間の半角スペースは表示上の意味を持つことがあり、まれに詰まりすぎる／残りすぎるケースがあります。圧縮後は表示を確認し、重要なページは差分をチェックすることをおすすめします。
HTMLコメントは残りますか？
既定では残ります。整形では各コメントを行として保持し、圧縮でも標準では残します。圧縮モードで「コメント（<!-- -->）を除去する」にチェックを入れたときだけ、コメントを削除します。条件付きコメントや重要な注記を消したくない場合はチェックを外したままにしてください。
入力したHTMLはどこかに送信されますか？
送信されません。トークナイズ・整形・圧縮はすべてブラウザ内(JavaScript)で完結し、貼り付けたHTMLはサーバーに送られません。オフラインでも利用できます。