HTML フォーマッター

圧縮された、または 1 行のマークアップを、統一されたインデントの読みやすい HTML にできます。

ブラウザツールを読み込んでいます…

HTML フォーマッターでできること

圧縮されたテンプレート、メールの HTML、ブラウザの開発者ツールからコピーしたマークアップは、1 本の長い行で届くことがよくあります。ここに貼り付けると、ブロック要素がそれぞれ独立した行に移り、親の下にインデントされるので、構造の確認、差分のレビュー、入れ子が崩れている箇所の発見ができます。

リンクを 1 つだけ含むリスト項目のような短い要素は 1 行のまま残り、段落内のインラインタグはテキストの流れの中に残ります。プロジェクトに合わせて、「インデント」で「スペース 2 つ」「スペース 4 つ」「タブ」を選んでください。

入力

<nav><ul><li><a href="/">ホーム</a></li><li><a href="/docs/">ドキュメント</a></li></ul></nav><p>こんにちは、<em>ようこそ</em></p>

結果

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/docs/">ドキュメント</a></li>
  </ul>
</nav>
<p>こんにちは、<em>ようこそ</em></p>

nav と ul は独立した行になり、各リスト項目と段落はインラインの内容しか含まないので 1 行のままです。

HTML をボックスに貼り付けると、整形されたものがすぐに表示されます。インデントを選び、コピーするか .html ファイルとしてダウンロードしてください。

まれです。ブラウザはブロック要素の間の空白を無視します。例外は、インライン要素やインラインブロック要素が横に並んでいる場合で、その間に改行が入ると小さな隙間が見えることがあります。

マークアップは入れ子が深くなり、行がすぐに長くなるので、HTML ではスペース 2 つが最も一般的です。プロジェクトですでに使っているなら、スペース 4 つやタブでも構いません。大切なのは数より統一です。

はい。表を多用するメールのマークアップは、表、行、セルをそれぞれ独立した行にすると格段に追いやすくなり、メールクライアントが頼りにするインラインスタイルも書かれたとおりに残ります。