HTML整形のやり方｜インデントを整える3つの方法と表示崩れの実測

HTMLの整形は「入れ子の深さに合わせて行頭をそろえ、タグごとに改行する」作業です。手で直すより、ツールに任せたほうが速く、人によるばらつきも出ません。

flowchart TD
    A[崩れたHTML] --> B{どこで整形?}
    B -->|すぐ| C[VS Code<br>Format<br>Document]
    B -->|まとめて| D[Prettier<br>js-beautify]
    B -->|端末に無い| E[Webの<br>ツール]
    C --> F[表示を確かめる]
    D --> F
    E --> F
    F --> G[HTMLの検証]

よく調べられることの答えを先にまとめます。

確認環境：Ubuntu 24.04.5 LTS の上で、Node.js 22.23.4 を使い、作業用の場所に npm で Prettier 3.9.10・js-beautify 2.0.3・html-validate 11.17.0 を入れて実行しました。VS Code の整形は、VS Code が HTML の整形に使う vscode-html-languageservice 5.6.2 を、VS Code の設定の既定値（html.format.*）で呼び出して出力を得ています。VS Code 本体の操作・ショートカット・設定は VS Code の公式ドキュメント（2026年10月28日更新の版）で確かめました。描画は Playwright 1.63.0 の Chromium 153.0.8010.12 で、幅480pxの画面に表示して、要素の幅・隙間・テキスト・スクリーンショットのハッシュを比べています。Prettier の設定は Prettier の公式ドキュメント、js-beautify の設定は公式の README で確かめました（確認日 2026年10月29日）。

HTML整形とは（インデント・改行をそろえる意味）

この節では、HTMLの整形が何を変えて、何を変えないのかが分かります。

HTMLの整形（フォーマット）とは、タグの入れ子の深さに合わせてインデント（行頭の字下げ）を付け、改行の位置をそろえることです。 親の要素の中にある子の要素を一段下げて書くと、どのタグがどこで閉じているかが目で追えるようになります。

ブラウザは、HTMLのソースにある改行や連続した空白を、多くの場所で1つの空白として扱います。そのため、ブロック要素（section・article・p・ul など）の間のインデントを増やしても、画面は変わりません。ただし、例外が3つあります。

• インライン要素の間：strong・a・span などの間に改行を入れると、そこに空白が1つ生まれます（後の節で実測）。
• pre と textarea の中：空白と改行がそのまま表示されます。
• CSS の white-space：white-space: pre などを指定した要素の中も、空白がそのまま表示されます。

整形の反対の処理は「圧縮（ミニファイ）」で、改行やインデントを取り除いてファイルを小さくします。読むときは整形、配信するときは圧縮、と使い分けます。

HTML整形の方法3つ（エディタ・コマンド・オンラインツール）

この節では、HTMLを整形する3つの方法の違いと、それぞれが向く場面が分かります。

この記事では、次の「崩れたHTML」を全部の方法で整形して比べます。インデントがばらばらで、1行に複数のタグが詰まり、インライン要素・pre・textarea・style・script を含む例です。

<!DOCTYPE html>
<html lang="ja"><head><meta charset="utf-8"><title>整形テスト</title>
<style>.price{color:#c00;font-weight:bold}.tag{display:inline-block;padding:2px 6px;border:1px solid #888}</style></head>
<body><header><p class="logo">お知らせ</p><nav><ul><li><a href="/">ホーム</a></li><li><a href="/news" class="current" aria-current="page" data-track="nav-news" title="お知らせ一覧">お知らせ</a></li></ul></nav></header>
<main>
    <section id="list">
  <article><h2>春の新商品</h2>
<p>価格は<strong class="price">1,200</strong>円です。<a href="/item/1">詳しく</a>見る。</p>
      <p><span>税</span><span>込</span>表示、<span class="tag">新着</span><span class="tag">限定</span></p>
<ul><li>色：赤</li>
    <li>サイズ：M</li></ul>
<pre>
  インデント
      そのまま
</pre>
<textarea name="memo" rows="2">  先頭の空白
次の行</textarea>
</article>
   </section></main>
<script>document.querySelectorAll('.tag').forEach(function(t){t.title=t.textContent})</script>
</body></html>

PrettierでHTMLを整形する（インストールと実行結果）

この節では、Prettier を入れて HTML を整形する手順と、実際の出力が分かります。

Prettier は、HTML・CSS・JavaScript などをまとめて整形できるフォーマッターです。 設定の項目が少なく、誰が実行しても同じ結果になるように作られています。プロジェクトに入れて使います。

崩れたHTMLを、設定を何も変えずに整形した結果です（npx prettier messy.html の出力そのまま）。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>整形テスト</title>
    <style>
      .price {
        color: #c00;
        font-weight: bold;
      }
      .tag {
        display: inline-block;
        padding: 2px 6px;
        border: 1px solid #888;
      }
    </style>
  </head>
  <body>
    <header>
      <p class="logo">お知らせ</p>
      <nav>
        <ul>
          <li><a href="/">ホーム</a></li>
          <li>
            <a
              href="/news"
              class="current"
              aria-current="page"
              data-track="nav-news"
              title="お知らせ一覧"
              >お知らせ</a
            >
          </li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="list">
        <article>
          <h2>春の新商品</h2>
          <p>
            価格は<strong class="price">1,200</strong>円です。<a href="/item/1"
              >詳しく</a
            >見る。
          </p>
          <p>
            <span>税</span><span>込</span>表示、<span class="tag">新着</span
            ><span class="tag">限定</span>
          </p>
          <ul>
            <li>色：赤</li>
            <li>サイズ：M</li>
          </ul>
          <pre>
  インデント
      そのまま
</pre>
          <textarea name="memo" rows="2">
  先頭の空白
次の行</textarea>
        </article>
      </section>
    </main>
    <script>
      document.querySelectorAll(".tag").forEach(function (t) {
        t.title = t.textContent;
      });
    </script>
  </body>
</html>

出力にある >お知らせ</a や </span\n> のような、閉じカッコだけが次の行に回る書き方は誤りではありません。インライン要素の前後に空白を足さずに改行するための書き方です。 理由は「整形で表示が変わる場合」の節で、描画した結果と一緒に説明します。整形した結果をもう一度 Prettier にかけても、1文字も変わりませんでした。

js-beautifyでHTMLを整形する（html-beautify）

この節では、js-beautify で HTML を整形するコマンドと、Prettier との出力の違いが分かります。

js-beautify は、JavaScript・CSS・HTML を整形するツールで、HTML 用のコマンドは html-beautify（js-beautify --html と同じ）です。 VS Code が最初から持っている HTML の整形も、公式ドキュメントによると js-beautify を元にしています。

npm install --save-dev js-beautify
npx js-beautify --html messy.html          # 結果を画面に出す
npx js-beautify --html -r messy.html       # ファイルを上書きする（-r は replace）
npx js-beautify --html -s 2 -w 120 messy.html   # 2スペース・120字で折り返す

設定を何も変えずに整形した結果の、本文の部分です。

<body>
    <header>
        <p class="logo">お知らせ</p>
        <nav>
            <ul>
                <li><a href="/">ホーム</a></li>
                <li><a href="/news" class="current" aria-current="page" data-track="nav-news" title="お知らせ一覧">お知らせ</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="list">
            <article>
                <h2>春の新商品</h2>
                <p>価格は<strong class="price">1,200</strong>円です。<a href="/item/1">詳しく</a>見る。</p>
                <p><span>税</span><span>込</span>表示、<span class="tag">新着</span><span class="tag">限定</span></p>
                <ul>
                    <li>色：赤</li>
                    <li>サイズ：M</li>
                </ul>
                <pre>
  インデント
      そのまま
</pre>
                <textarea name="memo" rows="2">  先頭の空白
次の行</textarea>
            </article>
        </section>
    </main>

js-beautify は、元の書き方を残しつつインデントをそろえ、Prettier は書き方まで決まった形に直します。 どちらも、整形した結果をもう一度かけると何も変わりませんでした。ただし、Prettier で整形したファイルを js-beautify にかけると、インデントが4スペースに変わり、head と body の前に空行が入りました。1つのプロジェクトで2つのフォーマッターを混ぜると、整形のたびに差分が出ます。

VS CodeでHTMLを整形する（Format Documentとショートカット）

この節では、VS Code で HTML を整形する操作と、拡張機能を入れないときの整形結果が分かります。

VS Code は、拡張機能を入れなくても HTML を整形できます。 公式ドキュメントに書かれている操作とショートカットです。

Linux だけショートカットが Ctrl+Shift+I である点に注意します。右クリックのメニューやコマンドパレットで「Format Document」と打っても実行できます。

保存したときに自動で整形する

設定（settings.json）で次を有効にすると、保存・入力・貼り付けのときに整形されます。公式ドキュメントによると、どれも既定では無効です。

{
  "editor.formatOnSave": true,
  "[html]": {
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  }
}

VS Code の既定のインデントは「4スペース」ですが、開いたファイルのインデントを自動で見分けて（2・4・6・8スペース）、それを使います。今のインデントは画面の右下のステータスバーに表示され、そこを押すとスペースとタブを変換できます。

VS Code の既定の整形結果

VS Code が HTML の整形に使う vscode-html-languageservice 5.6.2 を、VS Code の設定の既定値（wrapLineLength 120、contentUnformatted は pre・code・textarea、wrapAttributes は auto）で呼んだ結果の一部です。

        <nav>
            <ul>
                <li><a href="/">ホーム</a></li>
                <li><a href="/news" class="current" aria-current="page" data-track="nav-news" title="お知らせ一覧">お知らせ</a>
                </li>
            </ul>
        </nav>

1行が120字を超えたため、</li> だけが次の行に回りました。それ以外は js-beautify に -w 120 を付けた結果と同じでした。違ったのは script の中で、languageservice だけで呼ぶと script の中は元の1行のままでした。公式ドキュメントは、script タグを除外しない限り埋め込みの JavaScript も整形される、としています（VS Code 本体では JavaScript の整形の仕組みが受け持つ部分です）。

VS Code の整形を Prettier に切り替える

Prettier の拡張機能（Prettier - Code formatter、ID は esbenp.prettier-vscode）を入れ、既定のフォーマッターに指定します。複数のフォーマッターがあるときは、コマンドパレットの「Format Document With...」から「Configure Default Formatter...」で選べます（VS Code の公式ドキュメント）。

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Prettier の拡張機能の公式 README によると、プロジェクトの node_modules に Prettier があればそれを使い、無ければ拡張機能に同梱の Prettier 3 を使います。設定は .prettierrc などの設定ファイル、.editorconfig、VS Code の設定の順に優先され、設定ファイルが1つでもあると VS Code 側の Prettier の設定は使われません。

HTML整形の設定（インデント幅・printWidth・属性の改行）

この節では、インデントの幅、1行の長さ、属性の改行を変える設定と、変えたときの出力が分かります。

Prettier の公式ドキュメントは、printWidth を「行の長さの上限ではなく目安」と説明しています。手元でも、属性を分けられない長い行は80字を超えたまま出力されました。

属性の改行を変えた出力

属性の多いフォームを、設定を変えて整形しました。

--- Prettier（既定）
<form action="/search" method="get" class="search-form" role="search">
  <input type="search" name="q" placeholder="キーワード" required /><button
    type="submit"
  >
    検索
  </button>
</form>
--- Prettier --single-attribute-per-line --bracket-same-line
<form
  action="/search"
  method="get"
  class="search-form"
  role="search">
  <input
    type="search"
    name="q"
    placeholder="キーワード"
    required /><button type="submit">検索</button>
</form>
--- js-beautify -s 2 -A force-aligned
<form action="/search"
      method="get"
      class="search-form"
      role="search"><input type="search"
         name="q"
         placeholder="キーワード"
         required><button type="submit">検索</button></form>

3つとも、Chromium で描画したボタンの幅（42.7px）と、入力欄とボタンの隙間（0px）は元のHTMLと同じでした。見た目を変えずに、読みやすさだけを選べます。 属性を1つずつ改行すると、属性を足したときの差分が1行で済むため、レビューしやすくなります。

設定ファイルに書く

Prettier はプロジェクトの直下の .prettierrc.json を読みます。HTML だけ設定を変えるときは overrides を使います。

{
  "printWidth": 100,
  "singleAttributePerLine": true,
  "overrides": [{ "files": "*.html", "options": { "tabWidth": 2 } }]
}

js-beautify は .jsbeautifyrc を読み、html の中に HTML だけの設定を書けます。手元では、作業フォルダーに置くと indent_size が2になりました。

{
  "indent_size": 4,
  "html": { "indent_size": 2, "wrap_line_length": 100, "end_with_newline": true }
}

Prettier は .editorconfig も読みます。.prettierrc.json が無い状態で [*.html] に indent_size = 4 と書くと、Prettier の出力が4スペースになりました。

整形で表示が変わる場合（インライン要素の空白をChromiumで実測）

この節では、整形で画面の見た目が変わるのはどんなときかが、描画して測った数字で分かります。

インライン要素（span・a・strong・inline-block の要素など）の間に改行を入れると、ブラウザはそこを空白1つとして表示します。 整形ツールがこの改行を入れるかどうかで、表示が変わるかどうかが決まります。崩れたHTMLと、各ツール・設定で整形したHTMLを Chromium で描画して比べました。

「画像の一致」は、幅480pxで撮ったページ全体のスクリーンショットのハッシュが、元のHTMLと同じかどうかです。2つ目の p の文字列だけの幅は、172pxから188pxに広がっています。1つ目の p も、ignore では「価格は 1,200 円です。 詳しく 見る。」と、すき間が入りました。

Prettier の閉じカッコが次の行に回る理由

Prettier の既定（htmlWhitespaceSensitivity: "css"）は、要素の CSS の display の既定値を見て、インライン要素の前後の空白を「意味がある」と扱います。空白の無い </span><span> の間で改行したいとき、タグの外に改行を入れると空白が生まれるため、タグの中（</span と > の間）で改行します。 これが </span\n> の形です。見た目は崩れていても、表示は変わりません。

--html-whitespace-sensitivity ignore にすると、この書き方をやめて素直に改行します。その代わり、上の表のとおり空白が入ります。

          <p>
            <span>税</span>
            <span>込</span>
            表示、
            <span class="tag">新着</span>
            <span class="tag">限定</span>
          </p>

英語の文なら改行が単語の間の空白になるだけなので、表示は変わりません（手元では「Hello world」の幅は改行の有無で同じ76.9px）。日本語の文の途中の改行は、空白として表示されることがあります。 Prettier も js-beautify も、空白の無い日本語の文の途中では改行しませんでした。

pre・textarea・script は整形でどうなるか

textarea と pre は、開始タグの直後にある改行1つを、HTML の決まりで読み飛ばします。Prettier はこれを使って、値を変えずに改行を足しています。自分で手を入れるときに、開始タグの直後へ改行を2つ入れると、値の先頭に改行が入ります。

閉じタグの誤りは整形では直らない（HTMLの検証との違い）

この節では、整形と検証（バリデーション）の違いと、壊れたHTMLを整形にかけたときの動きが分かります。

整形は見た目をそろえる作業で、HTML として正しいかは調べません。 正しいかを調べるのは検証ツール（html-validate、W3C の Nu Html Checker など）です。閉じ忘れ・ID の重複・alt の無い img を入れたHTMLで比べました。

<!DOCTYPE html>
<html lang="ja"><head><meta charset="utf-8"><title>壊れた例</title></head>
<body><main><section id="a"><p>閉じ忘れ<strong>太字</p>
<img src="a.png"><p id="a">ID重複</p>
<ul><p>ul の直下に p</p></ul></section></main></body></html>

Prettier は、閉じタグの対応が取れないところで止まり、ファイルを変えませんでした（終了コード 2）。

[error] broken.html: SyntaxError: Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (3:46)
[error] > 3 | <body><main><section id="a"><p>閉じ忘れ<strong>太字</p>
[error]     |                                              ^^^^

js-beautify は、エラーを出さずに整形しました（終了コード 0）。

            <p>閉じ忘れ<strong>太字</p>
            <img src="a.png">
            <p id="a">ID重複</p>
            <ul>
                <p>ul の直下に p</p>
            </ul>

このインデントでは、img と2つ目の p は1つ目の p と並んでいるように見えます。ところが Chromium が実際に組み立てた DOM（document の中身）は次のとおりで、img から後ろは全部 strong の中に入り、太字で表示されていました。

<main><section id="a"><p>閉じ忘れ<strong>太字</strong></p><strong>
<img src="a.png"><p id="a">ID重複</p>
<ul><p>ul の直下に p</p></ul></strong></section></main>

整形したインデントは、ブラウザが読み取った構造と一致するとは限りません。 同じファイルを html-validate にかけると、14件のエラーが出ました（一部）。

  3:37  error  Unclosed element '<strong>'                              close-order
  3:47  error  End tag '</p>' seen but there were open elements         close-order
  4:2   error  <img> is missing required "alt" attribute                wcag/h37
  4:25  error  Duplicate ID "a"                                         no-dup-id
  5:6   error  <p> element is not permitted as content under <ul>       element-permitted-content

✖ 14 problems (14 errors, 0 warnings)

Prettier と html-validate を一緒に使うときの設定

Prettier で整形したファイルを html-validate の recommended で調べると、整形が原因のエラーが2件出ました。

  1:1   error  DOCTYPE should be uppercase                                              doctype-style
  4:27  error  Expected omitted end tag <meta> instead of self-closing element <meta/>  void-style

html-validate には、Prettier の出力とぶつかる規則を外す html-validate:prettier というプリセットがあります（v7.18.0 から）。設定に足すと、エラーは0件になりました。

{ "extends": ["html-validate:recommended", "html-validate:prettier"] }

大きいHTML・1行に詰まったHTMLの整形（実測）

この節では、圧縮されて1行になったHTMLを整形したときの結果と、かかった時間が分かります。

1行に詰まったHTML（ミニファイされたHTML）も、同じコマンドでそのまま整形できます。 article を5,000個並べた800,696バイト・1行のHTMLを作り、2コアの環境で3回ずつ整形しました。

この記事の崩れたHTML（1,055バイト）では、Prettier は0.21秒、js-beautify は0.13秒でした。大きなファイルを何度も整形するなら js-beautify が速く、普段の大きさのファイルではどちらも1秒かかりません。 出力が元より大きくなるのはインデントの分で、4スペースの js-beautify のほうが大きくなりました。整形したファイルを配信すると転送量が増えるため、配信するものは圧縮したままにします。

チームでHTMLの整形をそろえる（設定ファイル・保存時の整形・CI）

この節では、チームの全員で同じ整形結果にするための手順が分かります。

整形の結果が人によって違うと、中身の変わらない差分がレビューに混ざります。 次の順に決めると、そろえやすくなります。

1. 1フォーマッターを1つに決めるPrettier と js-beautify を混ぜない。混ぜると整形のたびに差分が出た
2. 2版を固定してプロジェクトに入れるnpm の devDependencies に入れ、VS Code の拡張機能もこの版を使うようにする
3. 3設定ファイルをリポジトリに置く.prettierrc.json と .editorconfig。対象外は .prettierignore
4. 4全ファイルを一度だけ整形してコミット整形だけのコミットに分けると、履歴を追いやすい
5. 5保存時の整形を有効にする.vscode/settings.json に editor.formatOnSave を書いて共有
6. 6CI で prettier --check を動かす整っていないファイルがあれば終了コード1で止まる

手元で2つのファイルに --check と --write を実行した結果です。

$ npx prettier --check "src/**/*.html"
Checking formatting...
[warn] src/about.html
[warn] src/index.html
[warn] Code style issues found in 2 files. Run Prettier with --write to fix.
（終了コード 1）
$ npx prettier --write "src/**/*.html"
src/about.html 150ms
src/index.html 34ms
$ npx prettier --check "src/**/*.html"
Checking formatting...
All matched files use Prettier code style!
（終了コード 0）

一部だけ整形したくないときは、要素の前に <!-- prettier-ignore --> を置きます（Prettier の公式ドキュメント）。Prettier は、.git などのフォルダーと node_modules を最初から対象外にし、.gitignore に書いたファイルも対象外にします。コミットの前に自動で整形する仕組みは、関連記事「Git hooks・husky v9の設定方法｜実行結果とlefthook比較」で扱っています。

オンラインのHTML整形ツールに貼るときの注意

この節では、Web サイトの整形ツールを使うときに確かめることが分かります。

オンラインの整形ツールは手軽ですが、貼ったHTMLがどこへ送られるかはツールによって違います。 ブラウザの中だけで処理すると明記したツールもあれば、サーバーへ送って処理するツールもあります。

• 1社外秘・個人情報を含むHTMLを貼らない管理画面のHTML、メールアドレスの入った一覧、APIキーを書いた script は、手元のツールで整形する
• 2ブラウザの中で処理するか確かめる説明の記載と、開発者ツールの Network タブで、整形のときに送信が起きないかを見る
• 3URL から取り込む機能に社内の URL を入れない取り込みはツールの運営元のサーバーから行われることがある
• 4整形の後で表示を確かめるインライン要素の隙間・pre の中身を、元の表示と見比べる
• 5会社の決まりを先に確かめる外部のサービスにコードを貼ってよいかは、会社の情報の扱いの決まりに従う

Node.js が入っていれば、npx prettier ファイル名 で、ファイルを外へ送らずに整形できます。

HTML整形のよくあるエラー・つまずき（原文つき）

この節では、整形のときに出るエラーの原文と、その直し方が分かります。

Prettier のエラーは、行と列（例：3:46）と、^^^^ の印で場所を示します。エラーが出たときは、ファイルは書き換えられていません。

どの方法でHTMLを整形するか（判断表）

この節では、自分の状況でどの整形の方法を選べばよいかが分かります。

VS Code の設定をまとめて見直すときは関連記事「VS Code settings.jsonおすすめ設定｜コピペ用全文と各項目解説」、整形以外のショートカットは関連記事「VSCodeショートカット一覧｜Win/Mac対応130項目とAI操作・変更方法」で扱っています。

よくある質問

Q. HTMLを整形するショートカットは何ですか？ A. VS Code では、Windows は Shift+Alt+F、Mac は Shift+Option+F、Linux は Ctrl+Shift+I です（Format Document）。選んだ範囲だけなら Ctrl+K Ctrl+F（Mac は Cmd+K Cmd+F）です。

Q. HTMLのインデントは2スペースと4スペースのどちらがよいですか？ A. どちらでも動きは同じです。Prettier の既定は2、js-beautify と VS Code の既定は4でした。入れ子が深くなるHTMLは2のほうが横に伸びにくくなります。大切なのは、プロジェクトの中でそろえることです。

Q. タブとスペースのどちらでインデントすべきですか？ A. どちらかにそろえます。混ぜると、エディタによって字下げの見え方が変わります。VS Code はステータスバーからスペースとタブを変換でき、Prettier は useTabs、js-beautify は indent_with_tabs で切り替えます。

Q. 整形するとページの表示は変わりますか？ A. 手元で試した14通りの整形のうち12通りは、スクリーンショットまで元と同じでした。変わったのは、Prettier の ignore と、js-beautify でインライン扱いのタグを空にした設定で、インライン要素の間に約4pxの隙間が生まれました。

Q. Prettier の出力で、> だけが次の行にあるのはなぜですか？ A. インライン要素の前後に空白を増やさずに改行するためです。タグの外で改行すると空白が1つ生まれるので、タグの中で改行しています。表示は変わりません。

Q. 閉じタグの付け忘れも整形で直りますか？ A. 直りません。Prettier は「Unexpected closing tag」で止まり、js-beautify はそのまま並べました。誤りを見つけるには html-validate や W3C の Nu Html Checker を使います。

Q. VS Code で拡張機能を入れずに整形できますか？ A. できます。VS Code には js-beautify を元にした HTML の整形が入っていて、html.format.* の設定で細かく変えられます。Prettier に切り替えるときは拡張機能を入れ、既定のフォーマッターに指定します。

Q. 保存したときに自動で整形するには？ A. VS Code の設定で "editor.formatOnSave": true にします。HTML だけにするなら "[html]" の中に書きます。既定では無効です。

Q. 1行に圧縮されたHTMLを読みやすくできますか？ A. できます。800KB・1行のHTMLを、Prettier は約9秒、js-beautify は約1秒で40,000行ほどに整形しました。整形後のファイルは配信には使わず、読むためだけに使います。

Q. PHP やテンプレートの入ったHTMLも整形できますか？ A. Prettier は拡張子が .tpl などだと「No parser could be inferred」で止まり、--parser html を付けると整形しました。<?= $name ?> を含む短い例は崩れませんでしたが、テンプレートの書き方によっては崩れるため、差分を確かめます。VS Code の既定の整形には、django・erb・handlebars・php のタグを考える html.format.templating があります。

Q. オンラインの整形ツールは使ってよいですか？ A. 社外秘や個人情報を含まないHTMLなら便利です。ブラウザの中だけで処理するか、送信が起きないかを確かめ、会社の決まりに従います。手元で npx prettier を使えば外へ送らずに済みます。

まとめ

• HTMLの整形は、VS Code の Format Document（Windows Shift+Alt+F・Mac Shift+Option+F・Linux Ctrl+Shift+I）か、Prettier・js-beautify のコマンドで行う。
• Prettier は2スペース・80字が既定で、書き方まで決まった形に直す。js-beautify は4スペースで、元の書き方を残す。VS Code の既定の整形は js-beautify が元。
• 14通りの整形を Chromium で描画すると、12通りは表示が元と同じ。Prettier の ignore などでインライン要素の間に改行が入ると、約4pxの隙間が生まれた。
• 整形は誤りを直さない。Prettier は閉じタグの誤りで止まり、js-beautify は黙って並べ、そのインデントはブラウザの DOM と違っていた。検証は html-validate で行う。
• チームではフォーマッターを1つに決め、設定ファイル・保存時の整形・CI の --check でそろえる。オンラインツールには機密を貼らない。

HTML の要素そのものの意味と使い分けは、関連記事「HTMLタグ一覧表｜基本タグから全要素まで表示例・コピペ用コード付き」と関連記事「HTMLのheader・main・section・articleの違いと使い分け」で扱っています。

参考・出典

確認日はいずれも 2026年10月29日です。

• Prettier「Options」：https://prettier.io/docs/options
• Prettier「Ignoring Code」：https://prettier.io/docs/ignore
• Prettier「Prettier 1.15: HTML, Vue, Angular and MDX Support」（空白を考えた整形）：https://prettier.io/blog/2018/11/07/1.15.0
• Prettier「Prettier Formatter for Visual Studio Code」：https://github.com/prettier/prettier-vscode
• js-beautify（README）：https://github.com/beautifier/js-beautify
• Visual Studio Code「HTML in Visual Studio Code」（Formatting）：https://code.visualstudio.com/docs/languages/html
• Visual Studio Code「Basic editing」（Formatting・Indentation）：https://code.visualstudio.com/docs/editing/codebasics
• Visual Studio Code「Formatting Python in VS Code」（Format Document With・既定のフォーマッターの選び方）：https://code.visualstudio.com/docs/python/formatting
• Visual Studio Code のソースコード「html-language-features/package.json」（html.format.* の既定値）：https://github.com/microsoft/vscode/blob/main/extensions/html-language-features/package.json
• html-validate「Presets」：https://html-validate.org/rules/presets.html

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。