この記事のポイント
- 1行のHTMLを実際にFormatした
- mainの中のh1とpが1段内側へ並んだ
- 表示内容やタグ構造は変えず、改行と字下げを加えた
サムネイルはイメージ写真。写真の配布元：Unsplash（利用許諾）。本文の画面は実際の操作時に撮影した。
検証環境：2026年10月5日、Windows上のCodex内蔵ブラウザーでConvert CaseのHTML Formatterを未ログインで使用。既定のタブインデント、幅4、コメント保持で検証した。
入力は「<main><h1>RyXeon</h1><p>実測記事</p></main>」という1行である。Formatを押すと5行になり、h1とpはmainの内側へ1段下げて表示された。
整形が変えるのは主に改行とインデントで、今回のタグ順や「RyXeon」「実測記事」という内容は変わらなかった。1行に詰まったHTMLをレビューするとき、どの要素がどの親に入っているかを追いやすくなる。
操作手順
- HTML Formatterを開く。
- エディターの既存例を選択し、自分のHTMLへ置き換える。
- Tabs/SpacesとIndentation Sizeを選ぶ。
- Formatを押す。
- タグの対応と階層を確認し、コピーまたはHTMLファイルで保存する。
FormatとMinifyの使い分け
Formatは読むための形へ広げ、Minifyは空白、コメント、改行を落として配信用の短い形へ戻す。今回のような短い断片では容量差は小さいが、長いテンプレートの確認ではFormat、転送量を詰めたい配布物ではMinifyという使い分けが分かりやすい。
ツールはマークアップの構造を変えないと説明している。文章の意味やアクセシビリティを改善する機能ではないため、整形後も見出し順やalt属性などは別に確認する必要がある。
コメント