HTML整形ツールの使い方
- HTMLを入力欄に貼り付けます。ページ全体、テンプレート、HTMLメール、ブラウザの開発者ツールからコピーした一部分など、何でもかまいません。貼り付けた時点で整形されます。
- 整形を選ぶとスペース2つ・4つ・タブでインデントし、圧縮（1行）を選ぶとブラウザが表示しない空白を取り除きます。<script> と <style> の中のコードもインデントするにチェックを入れると、そのブロックをタグの字下げに合わせてずらします。
- 結果の横のコピーを押すか、ダウンロードで .html ファイルとして保存します。
- 警告があれば確認します。閉じられていないタグや余分なタグを、行と列つきで表示します。
HTMLを整形すると見た目が変わることがある理由と、このツールの対策
ブラウザが並べる箱には2種類あります。div、p、見出し、リストと項目、表と行・セル、section、header などのブロック要素は新しい行から始まり、その前後の空白は表示されません。テキスト、a、b、em、span、img、button、input などのインラインの内容は文章の単語のように流れ、そこではスペース、タブ、改行の連続が1つのスペースとして表示されます。そのため <b>New</b><i>York</i> は「NewYork」と表示されますが、2つのタグを別の行に分ける整形ツールを通すと「New York」になってしまいます。
日本語ではこの問題がもっと目立ちます。日本語の文章は単語のあいだにスペースを入れないので、<p>日本語の<b>文章</b>です。</p> を整形のつもりで改行すると、Chromeなど多くのブラウザでは改行が半角スペースとして表示され、「日本語の 文章 です。」のような不自然なすき間ができます。このツールは、ブラウザと同じ規則に従います。改行を入れるのはブロック要素の隣だけで、インラインの要素どうしのあいだには空白を足しも削りもしません。上の例は「<p>日本語の<b>文章</b>です。</p>」のまま1行に残ります。もともと改行のある場所では、その行の字下げだけを整えます。
コメントと表示されない要素（script、style、meta、link、template）は、両側にテキストが接していない限り1行に置きます。a<!-- -->b は「ab」のままでなければならないからです。
| 変えるもの | 変えないもの |
|---|---|
| ブロック要素の隣の改行と字下げ | タグ名、属性、その値・引用符・順番 |
| テキスト内にもともとある改行の字下げ | テキストの文字と、そのあいだの空白 |
| 圧縮：ブロックの隣の空白を削除し、ほかの空白の連続を1つのスペースに | <pre>、<textarea>、<title> の中身。オプションを選ばない限り <script> と <style> も |
| Windowsの改行（CR LF）をLFに（ブラウザも同じように読む） | コメント、 などの実体参照、省略された終了タグ |
HTMLでは </li>、</p>、</td>、</tr>、</option> などの終了タグを省略できます。このツールはブラウザと同じようにそれらの要素がどこで終わるかを判断しますが、省略されたタグを書き足すことはしません。ノーブレークスペース（ やその文字）と全角スペースは、HTMLにとって空白ではなく文字なので、触れません。
計算例：お店の営業時間ページ
入力欄のサンプルは、1行に書かれた498バイトのページです。スペース2つで整形すると次のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>営業時間</title>
<style>p{margin:0}</style>
</head>
<body>
<nav class="top"><a href="/">ホーム</a> | <a href="/menu">メニュー</a></nav>
<main>
<h1>営業<em>時間</em></h1>
<p>月曜日を除き<b>毎日</b>営業しています。
<ul>
<li>火〜金：9時〜18時
<li>土・日：10時〜16時
</ul>
<pre> ご予約は
03-1234-5678</pre>
<!-- 地図をここに -->
</main>
<script>document.title += " ✓";</script>
</body>
</html>
ナビゲーションのリンクは区切りの「 | 」と一緒に1行のまま、段落の太字もインラインのままです。リストの項目は省略された </li> を省略したまま保ち、HTMLの規格どおり <ul> が段落を閉じています。<pre> の電話番号の字下げもそのままです。圧縮すると498バイトで、もともと詰めて書かれていたのでほとんど変わりません。
警告
ブラウザはHTMLを拒否せず、自動で修復します。しかしその修復が意図どおりとは限りません。このツールは、修復が必要だった箇所を一覧にします。
<div class="box"> <p>はじめに <div>注意事項</div> </p> <span>未完成 </div>
| 行 | 列 | 警告 |
|---|---|---|
| 2 | 25 | 余分な </p>：<p> の中の <div> や <ul> などのブロックが段落を閉じるため、ブラウザはここに空の <p></p> を追加します |
| 3 | 3 | <span> が </div> より前で閉じられていません |
- 閉じられていません：終了タグが必要な要素が、親要素が終わる時点でまだ開いています。ブラウザはそこで閉じます。
- 余分な終了タグ：その名前の要素が開いていないので、タグは無視されます。
<p>の中の<div>やリストは段落を閉じるため、上の例の</p>は余分になります。 - スラッシュは無視されます：HTMLでは
<div/>で div は閉じません。終了タグがないのは<br>や<img>のような空要素だけで、スラッシュの有無は関係ありません。<svg>と<math>の中では、スラッシュで要素が閉じます。 - 属性の重複：ブラウザは最初の属性を使い、2つ目を無視します。
制限とヒント
- CSSで規則が変わります。このツールは各要素の標準の表示方法を前提にしています。スタイルシートでリストの項目を
inline-blockにしている場合（メニューでよくある作り方）、</li><li>のあいだの改行で小さなすき間ができます。CSSでwhite-space: preにした要素では新しい字下げが表示されます。そうしたマークアップは圧縮のままにするか、整形後に表示を確認してください。 - scriptとstyleのコードは整形しません。オプションはブロック全体をずらすだけで、コードは変えません。複数行にわたるJavaScriptのテンプレートリテラルには字下げが入ってしまうので、その場合はオプションをオフにします。
- サーバー側のテンプレート（PHP、JSP、Jinja、Thymeleafの式など）やJSXはHTMLではないため、混ざっていると正しく整形できないことがあります。
- 大きなページ：1MBのページでも1秒ほどで整形でき、長い結果もなめらかにスクロールできます。
- XHTML、SVG、フィードはXML整形でより厳密なXMLの規則をチェックできます。ページの文字数を数えるなら文字数カウントが使えます。
HTMLはお使いの端末から出ません
処理はすべてブラウザの中で行われます。貼り付けた内容はアップロードも記録もされず、保存もされないので、ページを再読み込みすると消えます。
よくある質問
整形するとページの見た目が変わりますか？
HTML要素の標準の表示方法なら変わりません。ブラウザが描かない場所の空白だけを足したり削ったりし、<pre>、<textarea>、script、styleには手を加えません。例外は、CSSで要素の display や white-space を変えている場合で、上で説明しています。
すべてのタグを1行ずつに分けないのはなぜですか？
<a>、<b>、<span> のようなインラインのタグは文章の一部です。もともと空白のなかった場所で改行すると、目に見えるスペースが入ってしまいます。特に日本語の文章では、単語の途中にすき間ができたように見えます。そのため、元のHTMLに空白がない限り、つなげたままにします。
壊れたHTMLを直してくれますか？
閉じ忘れや余分なタグ、属性の重複、空要素でない要素のスラッシュなどの問題は報告しますが、タグは書かれたとおりに残し、勝手に足したり削ったりはしません。警告を見て元のソースを直し、もう一度整形してください。
圧縮したHTMLは同じページですか？
はい。圧縮で取り除くのはブロック要素の隣の空白だけで、ほかの空白の連続は1つのスペースにします。ブラウザはどちらも同じように描きます。コメントとscript・styleの中身は残します。なお、サーバーでgzipやBrotliの圧縮を有効にするほうが、HTMLの圧縮より効果は大きくなります。
HTMLはアップロードされますか？
いいえ。整形はブラウザの中で行うので、公開前のページやログインが必要なページのHTMLにも使えます。ページを一度開けば、オフラインでも動きます。
最終更新日：2026年10月16日