実用ガイド · ウェブとコード
HTMLの空白とインデント：整形後の確認点
空白が表示に影響する場面と、HTMLを整形した後に確認したい点を具体例で紹介します。
作成 Puffinmint · 更新日
タグ間の空白が意味を持つ理由
字下げは読みやすさを助けますが、テキストノードも文書の一部です。インライン要素間の空白は単語や画像を分けることがあります。
コピーを整形しテキストを保持する
HTMLのコピーで作業します。属性とpre・script・style・textarea・titleを保持し、ブロック間の空白を調整します。JSX変換や文書の妥当性検証は行いません。
-
入力
<div><p>A <strong>B</strong> C</p></div> -
計算の手順
方法を選んで実行する
-
結果
<div> <p>A <strong>B</strong> C</p> </div>
インライン空白とpreの内容
strongを含む文では前後の空白が単語を区切ります。削除しないでください。preの改行と先頭空白も、外側の要素を字下げしても保持する必要があります。
利用例
- 入力
<div><p>A <strong>B</strong> C</p></div>- 結果
<div> <p>A <strong>B</strong> C</p> </div>
プロジェクト内でソースを確認する
プロジェクトのCSS、特にwhite-spaceとテンプレートのテストで確認します。整形できてもタグの入れ子が正しいとは限りません。表示はテキストで、HTMLやスクリプトは実行しません。
これは例の入力値で、実際の事例の測定値ではありません。結果は実際のツールと同じ計算エンジンを使います。ガイドの計算手順と比較し、確認後にチェックを付けてください。
| 項目 | 値 |
|---|---|
| このツールにはどのような制限がありますか？ | 100,000文字・10,000トークン以内。HTML専用で検証やJSX変換は行いません。ブロック間の空白は変わる場合があります。 |
| 処理とプライバシー | 入力内容と結果はブラウザー内で処理し、サーバーには送信しません。集計統計が有効な場合は、ツール名と処理の成否だけを記録し、内容は記録しません。 |