01 / 例
例
入力
<main><h1>こんにちは</h1><p>ようこそ</p></main>結果
<main>
<h1>こんにちは</h1>
<p>ようこそ</p>
</main>コード整形 / MULTIVERTO
HTML を整形
検査の容易さのために明示的にネストされた HTML タグをレイアウトします。
変換ツール入力内容はこのブラウザ内にとどまり、変換のために送信されません。
ファイルはブラウザー内にとどまります。
ツールを連結
02 / ガイド
HTML を整形 — 仕組み
このツールで変わること
明示的に閉じられた HTML タグの入れ子を見やすく並べます。要素の開始と終了、兄弟要素の位置を行とインデントで追えるので、部品やメール用の短い断片を点検するときに便利です。要素内のテキストは保ちます。ただし、閉じタグを省略できる構文を含む文書全体や、ブラウザーがエラーを修復する HTML については、ブラウザー相当のパーサーで確認してください。
対応する構文と制約
HTML には要素、属性、テキストノードがあり、テキストの空白が実際の表示を変える場合があります。このローカル整形器は、明示的に対応する開始タグと終了タグを持つ短い断片を扱い、その間のテキストを保持します。script、style、pre、textarea のように内容を特殊な規則で読む要素は拒否します。単純なタグの走査では安全に構造を決められないためです。結果の見た目は使用先のブラウザーでも確認してください。
実際に使うときの手順
HTML の入れ子を確認するときは、短い代表例から始めます。サンプル <main><h1>Hello</h1><p>Welcome</p></main> を整形すると、main の中で h1 と p が別々の行にインデントされ、二つの兄弟要素が見分けやすくなります。Hello と Welcome の文字列やタグ名は変わりません。結果をブラウザーで表示し、テキストの間隔と要素の順序を元の断片と比べてください。複雑な文書では省略可能な終了タグや raw-text 要素を完全な HTML パーサーで扱います。
結果を検証する
開始タグと終了タグが明示された短い HTML 部品を貼り付け、親要素と兄弟要素の位置を確認します。整形後は実際に描画し、テキスト間の空白が変わっていないか比べてください。省略可能な終了タグ、script や style の内容には完全な HTML パーサーが必要です。このツールは不完全なマークアップをブラウザーがどう修復するか推測しません。元の断片を残し、要素名、属性の引用符、非 ASCII 文字、改行を照合してください。
HTML - 入力
構文を読み取り、形式を変換
HTML - 結果
ガイドを探す