マイツール

HTML 整形

乱れた HTML を読みやすいインデントに整えるか、1 行に圧縮します。すべてブラウザ内で完結します。

使い方

  1. HTML を貼り付けるか入力してください。入力するそばから整形（または圧縮）され、押すボタンはありません。
  2. 整形と圧縮を切り替え、スペース 2 つか 4 つを選びます。圧縮モードではインデントの設定は無効になります。
  3. ブロック要素は階層ごとに 1 段インデントし、1 要素 1 行にします。インラインの内容（テキストと <a> や <b> が混ざったもの）は書いたとおりに保ちます。
  4. 空要素（<br>、<img>、<input> など）は終了タグが不要で、任意の /> も含めてそのまま保ちます。
  5. 生テキスト要素（<script>、<style>、<textarea>、<title>、<pre>）は 1 文字ずつコピーし、中身の解析や整形は行いません。

例

入力

<!DOCTYPE html><html><head><meta charset="utf-8"><title>デモ</title></head><body><div class="card"><h1>こんにちは</h1><p>ようこそ <b>みなさん</b></p><ul><li>1 つ目</li><li>2 つ目</li></ul></div><script>const x=1;</script></body></html>

出力

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>デモ</title>
  </head>
  <body>
    <div class="card">
      <h1>こんにちは</h1>
      <p>ようこそ <b>みなさん</b></p>
      <ul>
        <li>1 つ目</li>
        <li>2 つ目</li>
      </ul>
    </div>
    <script>const x=1;</script>
  </body>
</html>

インラインの内容と <script> / <style> の中身はそのまま保たれます。<meta> は空要素なので、書いたとおりに残ります。

制限

  • 確認するのは構造だけです。タグの対応、空要素、よくある暗黙の終了（li / td / tr / dt / dd / option / p / head）、ネストを見ます。DTD やスキーマによる検証は行いません。
  • 埋め込まれた JavaScript と CSS は整形しません。<script> / <style> の中身はそのまま残します（必要な場合はコード整形を使ってください）。
  • HTML5 の省略可能な終了タグをすべて推論するわけではありません。本当に壊れたネストは行と列付きで報告します。
  • インライン・混在コンテンツは意図的にインデントし直しません。<pre> / <textarea> / <title> の中身はそのまま保ちます。
  • ファイルのアップロード、URL パラメータ、履歴、アカウントはありません。入力がブラウザの外に出ることはありません。

このツールボックスのほかの整形ツールとテキストツールです。

XML 整形

コード整形

圧縮（minify）