ToolDeck

HTML フォーマッター

HTML を適切なインデントでフォーマット・美化

サンプルを試す

HTML 入力

整形済み HTML

ローカルで実行 · シークレットの貼り付けも安全
整形済み HTML がここに表示されます…
こちらもどうぞ：HTML ミニファイアーHTML エスケープ / アンエスケープHTML to JSXHTML to Markdown

HTMLフォーマットとは？

HTMLフォーマッターは、HTMLフォーマット（美化またはプリティプリントとも呼ばれます）を実行するツールです。HTMLマークアップに一貫したインデント、改行、スペースを追加し、ネスト構造を視覚的に分かりやすくします。ブラウザはHTMLをレンダリングする際に空白を無視するため、1行で書かれたドキュメントも丁寧にインデントされたドキュメントも同じ出力を生成します。違いは人間のためのものです。整形されたHTMLは読みやすく、デバッグしやすく、保守しやすくなります。

HTML仕様（WHATWGがHTML Living Standardとして管理）は110以上の要素を定義しており、それぞれに固有のコンテンツモデルがあります。<div>、<section>、<article>などのブロックレベル要素は通常、新しい行から始まり子要素にインデントを付けます。<br>、<img>、<input>などの空要素は閉じタグを持たず、インデントする子要素もありません。優れたフォーマッターはこれらの違いを理解し、すべてのタグの後に無差別に空白を追加するのではなく、インデントルールを適切に適用します。

フォーマットは開発時に最も重要です。CMSプラットフォームからの出力やブラウザの DevTools からコピーしたマークアップ、ミニファイされたHTMLや機械生成されたHTMLは、単一の密な1行として届くことがよくあります。適切なインデントがなければ、閉じタグの欠落を見つけたり深くネストされた構造を追跡したりするのに大幅な時間がかかります。HTMLフォーマッターは、そのテキストの壁を1ステップで適切にインデントされた読みやすいツリー構造に変換します。

このHTMLフォーマッターを使う理由

任意のHTMLを貼り付けると、適切にインデントされた出力がすぐに得られます。インストールするプラグインも、記述する設定ファイルも、作成するアカウントも不要です。

⚡
即時フォーマット
入力するたびに出力が更新されます。任意のソースからミニファイされたHTMLを貼り付けると、ビルドステップやCLIコマンドを待たずにインデントされた結果が表示されます。
🔒
プライバシー優先の処理
すべてのフォーマットはJavaScriptを使用してブラウザ内で実行されます。HTMLがデバイスの外に出ることはないため、APIキー、トークン、内部URLを含むマークアップを安全に貼り付けられます。
🎯
設定可能なインデント
2スペースと4スペースのインデントをワンクリックで切り替えられます。フォーマッターはすべてのネストレベルに選択を一貫して適用します。
📋
ワンクリックコピー
ボタン1つで整形済み出力をクリップボードにコピーできます。エディター、PRレビュー、ドキュメントに直接貼り付けられます。

HTMLフォーマッターの使用例

フロントエンド開発
バージョン管理にコミットする前にHTMLテンプレートを整形します。一貫したインデントはプルリクエストの差分ノイズを減らし、コードレビューを速くします。
バックエンドテンプレートのデバッグ
Django、Rails、PHPなどのフレームワークからサーバーレンダリングされたHTMLは、インデントなしのマークアップを出力することがよくあります。レンダリングされた出力をここに貼り付けてネストを確認し、閉じられていないタグを見つけられます。
DevOpsとCIパイプライン
ビルドツールが整形されたHTMLを生成することを確認します。静的サイトジェネレーターやHTMLメールビルダーの出力を、視覚的な検査の前にフォーマットします。
QAとテスト
テスト実行間のHTML出力の整形済みスナップショットを比較します。適切なインデントにより、2つのページのバージョンを差分する際に構造的な違いが明確になります。
データエンジニアリング
Webスクレイピングパイプラインは検査が必要な生のHTMLを生成します。スクレイピングしたページを整形してDOM構造を把握し、抽出セレクターを書く前に確認できます。
HTMLの学習
学生は任意のウェブサイトのソースコードを貼り付けて、要素がどのように互いにネストされているかを確認できます。整形されたツリービューはタグ間の親子関係を分かりやすくします。

HTMLインデントのルール

HTMLフォーマッターが各要素タイプをどのように扱うかはコンテンツモデルによって異なります。下の表は一般的な要素と、2スペースおよび4スペース設定でのインデント方法を示しています。どちらもブラウザで同じレンダリングを生成します。違いは可読性です。

タグ要素タイプ2スペース4スペース
<div>Block elementNew line, indent childrenNew line, indent children
<span>Inline elementNew line, indent childrenInline with parent text
<br>Void elementNew line, same levelNew line, same level
<img>Void elementNew line, same levelNew line, same level
<!-- -->CommentNew line, same levelNew line, same level
<!DOCTYPE>Document typeFirst line, no indentFirst line, no indent
<script>Script blockNew line, preserve innerNew line, preserve inner
<pre>PreformattedNew line, preserve innerNew line, preserve inner

フォーマッター vs. ミニファイアー vs. リンター

これら3つのツールはHTMLを対象としますが、目的がそれぞれ異なります。フォーマットとミニファイは逆の変換です。リンターは空白を変えずにエラーをチェックします。

フォーマッター（このツール）
HTMLを読みやすくするためにインデントと改行を追加します。DOM構造を変更せず、コンテンツを削除しません。出力はブラウザ上で入力と同一にレンダリングされます。
ミニファイアー
ファイルサイズを削減するために空白、コメント、省略可能な閉じタグを削除します。フォーマットの逆の操作です。読んだり編集したりするためではなく、本番ビルドに使用します。
リンター（HTMLHint / W3C）
alt属性の欠落、IDの重複、非推奨タグなどのHTMLエラーをチェックします。問題を報告しますが、インデントやフォーマットは変更しません。

コード例

一般的な言語やツールでHTMLをプログラム的にフォーマットする方法：

JavaScript (js-beautify)
import { html as beautify } from 'js-beautify'

const ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

const formatted = beautify(ugly, {
  indent_size: 2,
  indent_char: ' ',
  wrap_line_length: 80,
  preserve_newlines: false,
})
// → <div>
// →   <p>Hello</p>
// →   <ul>
// →     <li>One</li>
// →     <li>Two</li>
// →   </ul>
// → </div>
Python (BeautifulSoup)
from bs4 import BeautifulSoup

ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

soup = BeautifulSoup(ugly, 'html.parser')
print(soup.prettify(formatter='minimal'))
# → <div>
# →  <p>
# →   Hello
# →  </p>
# →  <ul>
# →   <li>One</li>
# →   <li>Two</li>
# →  </ul>
# → </div>
Go (goquery + x/net/html)
package main

import (
    "bytes"
    "fmt"
    "golang.org/x/net/html"
    "strings"
)

func main() {
    ugly := "<div><p>Hello</p></div>"
    doc, _ := html.Parse(strings.NewReader(ugly))

    var buf bytes.Buffer
    html.Render(&buf, doc)
    fmt.Println(buf.String())
    // renders normalized HTML — pair with indent logic for pretty output
}
CLI (Prettier)
# Format a single file in place
npx prettier --write index.html

# Format and print to stdout (pipe-friendly)
npx prettier --parser html index.html

# Format with 4-space indentation
npx prettier --tab-width 4 --parser html index.html

# Format HTML from stdin
echo '<div><p>Hello</p></div>' | npx prettier --parser html

よくある質問

HTMLフォーマットとHTMLバリデーションの違いは何ですか？
フォーマットはマークアップを読みやすくするためにインデントと改行を追加します。バリデーションはマークアップがHTML仕様に準拠しているかを確認し、必須属性の欠落や不正なネストの要素などのエラーを報告します。フォーマッターはエラーを修正しません。バリデーターは空白を変更しません。
HTMLをフォーマットするとページのレンダリングは変わりますか？
ほとんどの場合、変わりません。ブラウザはレンダリング時に連続した空白を1つのスペースに折りたたみます。例外は、white-space: preまたは同様のCSSルールを持つ要素と、空白が重要な意味を持つ<pre>や<textarea>要素です。適切に構築されたフォーマッターはこれらの要素のコンテンツをそのまま保持します。
HTMLのインデントは何スペースが適切ですか？
2スペースと4スペースはどちらも一般的です。GoogleのHTML/CSSスタイルガイドは2スペースを推奨しています。Prettierフォーマッターのデフォルトも2スペースです。4スペースはPythonのPEP 8規約に一致し、言語間で一貫性を保ちたいチームに好まれます。どちらかを選択し、フォーマッターまたはエディター設定で適用してください。
JavaScriptやCSSが埋め込まれたHTMLをフォーマットできますか？
このツールはHTML構造（タグと属性）をフォーマットします。インラインの<script>ブロックと<style>ブロックはそのまま保持されます。埋め込みのJavaScriptとCSSをフォーマットするには、3つの言語すべてを1回のパスで解析・フォーマットできるPrettierなどの専用フォーマッターを使用してください。
HTMLではタブとスペースの議論はまだありますか？
ほとんどのHTMLスタイルガイドとフォーマッターはデフォルトでスペースを使用します。2023年のStack Overflow開発者調査では、Web開発においてスペースを使用しているのは回答者の約55%です。タブには各開発者がエディターで好みの表示幅を設定できるというアクセシビリティ上の利点があります。どちらも機能しますが、選択自体よりもプロジェクト内での一貫性の方が重要です。
フォーマット後にHTMLの見た目が変わるのはなぜですか？
フォーマッターは元のマークアップになかった空白文字（スペースと改行）を追加します。これによりソースコードの外観は変わりますが、レンダリングされた出力は変わりません。ブラウザで視覚的な違いが見られる場合、追加された空白がタグ間に余分なスペース文字を生成しているインライン要素が原因である可能性が高く、CSS（親要素にfont-size: 0を指定するか、flexboxレイアウト）で解決できます。
チーム全体で一貫したHTMLフォーマットを適用するにはどうすればよいですか？
CIパイプラインで自動フォーマッターを使用してください。PrettierはHTMLをサポートし、Huskyまたはlint-stagedを使用してpre-commitフックとして実行できます。リポジトリにtabWidth、printWidth、htmlWhitespaceSensitivityを指定した.prettierrc設定ファイルを追加してください。これにより、各開発者のエディター設定に関係なく、すべてのコミットが同じフォーマットルールに従うようになります。
HTMLフォーマッターとHTMLビューティファイアーの違いは何ですか？
同じ操作です。「フォーマッター」と「ビューティファイアー」はどちらもHTMLマークアップにインデントと改行を追加することを指します。一部のツールは「beautify」（js-beautify）という言葉を使い、他のツールは「format」（Prettier）を使用します。出力は同一です。適切にインデントされた人間が読めるHTMLです。「プリティプリント」はドキュメントや検索クエリでよく使われる別の同義語です。

関連ツール

HTML ミニファイアー空白とコメントを削除して HTML を圧縮HTML エスケープ / アンエスケープHTML エンティティをエスケープ・アンエスケープ（&amp; &lt; &gt; &quot; など）HTML to JSXHTML を React JSX に変換 — class→className、スタイル文字列→オブジェクトHTML to MarkdownHTMLをMarkdown形式に変換