2025.07.08 Webサイト

HTML Tidyとは？HTMLを整形・修正するツールの使い方・インストール・他ツール比較

HTML Tidyは、崩れたHTMLを自動で整形し、閉じタグの欠落や古い記法を修正したうえで、W3C仕様に沿っているかを検証できるコマンドラインツールです。「HTMLを整形したい」「タグの抜けを直したい」「インデントを揃えたい」といった作業を一括で片づけられます。この記事では、HTML Tidyの基本コマンド（tidy -m など）、OS別のインストール方法、設定ファイルtidy.conf、インストール不要のオンライン版、そしてPrettierやLintとの違いまでを、実務で使う順に整理します。

まとめ：HTML Tidyの要点

  • HTML Tidyは「整形」「構文修正（閉じタグ補完・不要属性の削除）」「W3C準拠の検証」を1本でこなすCLIツール。HTMLの成形・整理・修正をまとめて自動化できる。
  • 基本は tidy -m index.html でその場整形。-o で別ファイル出力、-i でインデント、--char-encoding utf8 で日本語対応。
  • インストールはmacOSなら brew install tidy-html5、Ubuntuなら apt install tidy、Windowsなら choco install html-tidy。
  • 導入せず使うならブラウザのオンライン版。ただし機密を含むHTMLは社内環境での実行が安全。
  • Prettierは整形特化で構文検証はしない。HTML Tidyは整形に加えて構文の修正・検証まで行う点が違う。
  • テンプレート構文（波カッコ等）や動的に生成されるDOMには素通しせず、対象を選んで使う。

以下で、機能・コマンド・インストール・他ツールとの違いを具体例とともに見ていきます。

HTML Tidyとは（HTMLを整形・検証するツール）

HTML Tidyは、もともとW3CのDave Raggett氏が1990年代後半に開発したHTML整形ツールで、現在はHTACG（HTML Tidy Advocacy Community Group）がGitHub上のtidy-html5として保守している自由ソフトウェアです。公式サイトでは「HTMLツールの元祖（granddaddy of HTML tools）」と紹介され、HTML5を含む新しい標準にも対応しています。C言語製で動作が軽く、ライブラリ版のLibTidyを通じて多くのエディタやCMSにも組み込まれています。

役割は大きく3つあります。インデントや改行を揃える整形、閉じタグの補完や不要な属性の削除といった構文の修正、そしてW3C仕様への準拠チェックの3点です。HTMLの誤りを指摘するLint（静的解析）的な機能と、コードを書き換える整形機能を併せ持つのがHTML Tidyの位置づけです。

HTML Tidyでできること（主な機能）

HTML Tidyは単なる見た目の整形にとどまりません。代表的な機能は次のとおりです。

  • インデント・改行の自動整形（タブ幅やスペース幅も指定可能）
  • 閉じタグの補完、重複・不要属性の削除、非推奨タグへの警告
  • ネストの破綻や閉じ忘れなど構文エラーの検出と自動修正
  • HTMLだけでなくXHTML・XMLの整形と整形式チェック

たとえば、閉じタグが抜けたまま1行に詰まったHTMLを渡すと、不足タグを補い、読みやすいインデントに整えます。整形のイメージは次のとおりです（補完とインデントの挙動を示した例）。

// 整形前（閉じタグ抜け・1行）
<html><body><p>Hello<br>World</body></html>

// 整形後（閉じタグ補完・インデント付与）
<html>
  <body>
    <p>Hello<br>World</p>
  </body>
</html>

このように、手作業では見落としがちな閉じタグの過不足を機械的に揃えられるため、HTMLの修正・整理の時間を大きく削減できます。なお <br> のような空要素はもともと閉じタグが不要なため、補完の対象にはなりません。

HTML Tidyの使い方（コマンド）

HTML Tidyはコマンドライン操作が基本です。よく使う形を押さえれば、すぐ実務に組み込めます。

基本コマンド（その場整形・別名保存）

対象ファイルをその場で整形・上書きするなら -m（modify）を付けます。別ファイルに出力したいときは -o を使います。

tidy -m index.html
tidy -o clean.html source.html

オプションを付けずに tidy index.html とすると、整形結果は画面（標準出力）に表示され、元ファイルは変更されません。まず結果を確認してから上書きしたいときに便利です。

よく使うオプション（インデント・改行幅・文字コード）

整形スタイルはオプションで調整します。代表的なものを組み合わせた例です。

tidy -i -w 100 --char-encoding utf8 -m index.html

-i はインデントの有効化、-w 100 は100文字での改行、--char-encoding utf8 はUTF-8の指定で、日本語の文字化けを防ぎます。エラーや警告だけを確認したいときは -e を使うと、整形結果ではなくチェック結果だけが得られます。指定できる設定の一覧は tidy -help-config で確認できます。

設定ファイル（tidy.conf）で整形ルールを固定する

毎回オプションを並べる代わりに、整形ルールを設定ファイルにまとめられます。tidy.conf に1行ずつ「オプション名: 値」で書き、-config で読み込みます。

// tidy.conf の例
indent: yes
wrap: 100
char-encoding: utf8
tidy -config tidy.conf -m index.html

この設定ファイルをGitでプロジェクトに含めておけば、チーム全員が同じ整形ルールを共有でき、CI/CDのチェック工程にも同じ基準で組み込めます。同じ項目をコマンドラインと設定ファイルの両方で指定した場合は、コマンドラインの指定が優先されます。

HTML TidyのインストールをOS別に解説

HTML Tidyはクロスプラットフォーム対応で、パッケージマネージャーを使えばコマンド1つで導入できます。

OS インストールコマンド 補足
macOS brew install tidy-html5 Homebrewで最新版
Ubuntu・Debian sudo apt install tidy 標準リポジトリ
Windows choco install html-tidy Chocolatey／公式バイナリ

導入後は tidy --version でバージョンを表示し、正しくインストールできたか確認します。最新機能やHTML5対応の修正を取り込みたい場合は、GitHubのhtacg/tidy-html5からソースを取得し、CMakeでビルドする方法もあります。公式の配布サイト（binaries.html-tidy.org）からビルド済みバイナリをダウンロードして導入することもできます。

インストール不要のオンライン版（ブラウザでHTML整形）

ローカルに導入せず、ブラウザ上でHTMLを整形できるオンラインのHTML Tidyも複数あります。コードを貼り付けてボタンを押すだけで整形・検証ができ、導入コストはゼロです。ちょっとした確認や、開発環境を用意できない場面で役立ちます。

ただし注意点があります。HTMLを外部サーバーに送信するため、社内システムの構造や個人情報を含むコードを貼り付けるのはリスクになります。機密を含むコードは、ローカルにインストールしたHTML Tidyや社内で完結する環境で処理してください。オンライン版は処理できるコード量に制限がある場合もあり、小規模・一時的な整形に向いています。

HTML Tidyと他の整形・検証ツールの違い（Prettier・Lint）

HTMLやコードを整える手段はHTML Tidyだけではありません。役割の違いを押さえると使い分けが明確になります。

ツール 整形 構文修正 検証 主な対象
HTML Tidy ○ ○ ○ HTML/XHTML/XML
Prettier ○ × × HTML/CSS/JS等
ESLint等のLinter △ △ ○ JS/CSS等
W3C Validator × × ○ HTML

PrettierはHTMLやCSS、JavaScriptをまたいで見た目を統一する整形特化のツールで、構文エラーの検証や修正は行いません。ESLintに代表されるLinter（静的解析ツール）は、コードの誤りやスタイル違反を検出するのが主目的です。これに対しHTML Tidyは、整形・構文の自動修正・W3C準拠の検証を1本でこなすのが特徴で、特に古いHTML資産の整理や、正確なマークアップが必要な場面で力を発揮します。フロントエンド全体の整形はPrettier、HTMLの構文修正と検証はHTML Tidyと、目的で使い分けるのが実務的です。

HTML Tidyのメリットと使うべきでない場面

メリットは、可読性の向上と構文ミスの自動修正です。インデントが揃い、閉じタグの抜けやネストの破綻が機械的に直るため、レビューや保守の負担が下がります。W3C準拠の検証まで一度に行える点、C言語製で軽く古い環境やサーバー上でも動く点も強みです。

一方で、素通しすべきでない場面があります。テンプレートエンジンの構文（波カッコで囲んだ変数や制御構文など）やJavaScriptで動的に生成されるDOMにそのまま通すと、Tidyが想定外の書き換えを行い、レイアウトや出力が崩れかねません。SVGやMathMLなどHTML以外のマークアップも、整形が期待どおりにならない場合があります。こうした対象は、整形の前にプレースホルダへ退避するか、そもそもTidyの対象から外すのが安全です。万能ツールとして全HTMLに一律適用するのではなく、静的なHTMLやレガシーコードの整理に絞って使うと失敗しません。

よくある質問（FAQ）

HTML Tidyは今も更新されている？

更新されています。現在はHTACG（HTML Tidy Advocacy Community Group）がGitHubのhtacg/tidy-html5で保守しており、HTML5対応やバグ修正が継続されています。パッケージマネージャー経由で導入していれば、brew upgrade や choco upgrade で最新版に更新できます。

HTML Tidyとlint（リンター）の違いは？

lint（リンター）はコードの誤りやスタイル違反を「検出」するのが主目的です。HTML Tidyは検出に加えて、整形と構文の自動修正まで行います。誤りを見つけて直すところまで一気に進めたいならHTML Tidy、検出に特化して運用ルールで縛りたいならLinterが向きます。

日本語（UTF-8）のHTMLでも使える？

使えます。--char-encoding utf8（設定ファイルでは char-encoding: utf8）を指定すれば、日本語の文字化けを防いで整形できます。Shift_JISやEUC-JPで保存されたファイルは、事前にUTF-8へ変換しておくと安全です。

PrettierとHTML Tidyはどちらを使うべき？

目的で分かれます。HTML・CSS・JavaScriptを横断して見た目を統一したいならPrettier、HTMLの閉じタグ補完や構文検証まで行いたいならHTML Tidyです。両者は競合せず、フロントエンドの整形はPrettier、HTMLの修正・検証はHTML Tidyと併用する構成も実用的です。

オンライン版とローカル版はどちらがいい？

手軽さならオンライン版、安全性と自動化ならローカル版です。機密を含むコードや、CI/CDに組み込んで継続的に整形したい場合はローカルにインストールして使います。公開しても問題ない小さなコードの確認には、オンライン版が手早く便利です。あわせて、SGMLについても解説しています。

関連記事

資料請求

RELATED POSTS 関連記事

一覧へ戻る