HTML フォーマッター

Prettier で HTML を整形：インデントを統一し、1 行に 1 要素、埋め込みの CSS と JavaScript も整形します。スペース 2 つ・4 つ・タブから選べます。

インデント

HTML の入力

出力

すべてブラウザ内で実行されます。データがアップロードされることはありません。

HTML フォーマッターとは？

HTML フォーマッターは、ほとんどのフロントエンドのプロジェクトが使うフォーマッターの Prettier で、HTML をきれいで一貫したインデントに書き直します。インラインの <style> と <script> のブロックも、CSS や JavaScript として整形されます。

HTML フォーマッターの使い方

HTML を入力欄に貼り付けるか、サンプルを読み込む をクリックします。
インデント を選びます。
整形をクリックします（入力中も出力は更新されます）。
結果をコピーまたはダウンロードします。

例

入力

<div><p>Hi<b>x</b></p><img src=a.png alt=""></div>

出力

<div>
  <p>Hi<b>x</b></p>
  <img src="a.png" alt="" />
</div>

HTML フォーマッターを使うべき場面

CMS のエクスポート、メールテンプレート、生成されたマークアップの HTML を、編集やレビューの前に整えるときに使います。フォーマッターであってバリデーターではありません。閉じられていないタグや重複した id には、HTML バリデーターを使ってください。Prettier はブラウザ内で動くため、非常に大きな文書では少し時間がかかることがあります。

HTML フォーマッターの仕組み

コードは、Prettier 3（スタンドアロンビルド）とその HTML、CSS、Babel プラグインで整形され、これらは必要に応じて読み込まれます。Prettier はマークアップをツリーに解析し、行が 80 桁に収まるように出力し、属性を引用符で囲み、void 要素に /> を追加します。空白に影響を受けるインライン要素はまとめて保たれるため、表示されるページは変わりません。構文エラーは、Prettier の行と列付きで報告されます。