HTMLフォーマッター（整形ツール）

圧縮された、または手で編集されたHTMLは読みにくく、デバッグはさらに困難です。フォーマッターは、セクション、見出し、段落、リスト、表といったブロック要素をそれぞれ1行に置いて一貫したインデントを付け、テキストやリンク、太字などのインライン要素は文の中にまとめたままにします。埋め込みのCSSとJavaScriptも再インデントできます。

使い方

1. HTMLを貼り付けます。
2. スペース2つ、4つ、タブから選び、長いテキストを折り返す行の長さを設定します（0で折り返しオフ）。
3. 属性を別の行に置くタイミングと、埋め込みのstyle・scriptコードを再インデントするかどうかを選びます。
4. 整形されたHTMLをコピーします。その下の注記には、閉じられていないタグや余分なタグが行と列とともに表示されます。

計算式

block element → own line, children one level deeper; inline content → one line, wrapped only at existing spaces; <pre>, <textarea> → copied exactly

HTMLでは改行は空白として扱われるため、2つのインラインタグの間（たとえば <b>a</b><i>b</i>）に改行を入れると、単語の間に目に見える空白が生じます。そのためフォーマッターは、ブラウザーが空白を無視するブロック要素の周りにだけ改行を加え、テキストはすでに空白がある場所でのみ折り返します。</li> や </p> のように、HTMLで省略できる終了タグは追加しません。

計算例

サンプルのページは32行になります。<html>、<head>、<body> がそれぞれ1行で、<header>、<nav>、<main> がその下にインデントされ、セールの段落は <strong> と <time> をインラインに含んだまま1行に保たれます。2つのリスト項目は </li> を補わずにそれぞれ1行に置かれ、<pre> ブロックはそのままで、スクリプトの本体は波括弧に合わせて再インデントされます。