壊れたHTMLをここに貼り付けて、「HTMLを修復!!」をクリックしてください不正なHTMLを入力

HTML修復ツールとは

ほぼ正しいのにページが崩れるHTML、ありますよね。閉じていない<p>、余分な</div>、引用符の抜けたhrefがあるだけで、ドキュメントの残り全体が変なパース状態になります。ブラウザは壊れたマークアップに対しても頑張って解釈しますが、結果は思った通りにはまずなりません。ここに貼り付けてもらえれば、WHATWG HTML Living Standardのルールに沿って、パーサーが満足するものに直して返します。

日常的によくある壊れ方を狙っています。閉じタグの抜け、エスケープされていない引用符、"のない属性値、閉じていないリスト項目、入ってはいけない場所にあるブロック要素など。W3C公式バリデーターがエラーを1つずつ指摘してくれるような種類のものです。修復ツールはドキュメント全体を一度に読んで、そのままプロジェクトに戻せるきれいな版を返します。

マークアップは修復サービスへHTTPSで送られ、保持はしません。<code><script></code>や<code>data-*</code>属性にAPIキーなどの秘密情報を直書きしている場合は、貼る前にマスクしてください。

HTML修復ツールの使い方

3ステップ。部分的なフラグメント、完全なドキュメント、CMSのエクスポートで返ってきた変な混ざり物、どれにも対応します。

壊れたHTMLを貼るかサンプルを読み込む

左側のエディターにHTMLを入れます。サンプルHTMLを押すと、典型的なミスが入った小さな注文確認ページが入ります。閉じていない<head>、</li>のないリスト項目、引用符のないhrefなどです。壊れたHTMLの例:

<p>Your order <strong>SKU-101 ships tomorrow.
<ul>
  <li>1 x Laptop Stand
  <li>2 x USB-C Cable</li>
</ul>

ここには3つのミスがあります。<strong>が閉じていない、最初の<li>が終わっていない、</p>がない。修復ツールはこれらを正しい順序で閉じます。

「HTMLを修復!!」をクリック

緑のHTMLを修復!!ボタンを押してください。マークアップを修復サービスに送ると、HTML構文のルールに従って開いている要素を閉じ、属性の引用符を復元し、明らかにずれているネストを直します。テキスト、class、id、インラインスタイルはそのまま残ります。

修復後の出力を確認

右ペインに修復済みのHTMLが入ります。ブラウザに貼ってもいいし、念のためHTMLバリデーターに通してもいいし、CMSに戻してもOK。アクセシビリティのもっと深いレビューが必要なら専用のa11yツールを使ってください。それは構文修復とは別の話です。

実際にどんなときに使うか

CMSやメールテンプレートの出力を直す

WYSIWYGエディターやメールテンプレートビルダーは、地味に壊れたマークアップを吐き出すのが得意です。孤立した<p>タグ、欠けたalt属性、たまに閉じていない<td>。公開前に一度ここを通しておくと、ブラウザによってレンダリングがずれる事態を防げます。

Officeアプリから貼ったマークアップを救出

WordやGoogleドキュメントは、<span>や独自属性のごちゃごちゃを貼り付けてきますが、タグの不均衡や余分な がよく混ざります。修復ツールが構造を整えるので、ゼロから書き直す代わりに編集の続きから進められます。

手書きのコンポーネントを修復

チュートリアル、wikiページ、古いREADMEに残された雑なHTMLのかたまり。コピーして、整えて、必要な場所に貼るだけ。誰かのブログ記事では動いた例が自分の環境では動かないとき、詰まりを解消するのに便利です。

スクレイピングしたページをパース前にきれいにする

HTMLをスクレイピングして抽出器に流すとき、壊れたマークアップはDOMベースのパーサーをすぐ狂わせます。先にここを通すことで、パーサーに安定した構造を渡せます。厳密な準拠が必要なら本物のバリデーターと併用してください。

よくある質問

貼ったHTMLは保存・共有されますか?

貼り付けたHTMLは修復のためにHTTPS経由でバックエンドへ送られますが、レスポンスを返した後は保持しません。リクエスト経路に第三者のトラッカーは入れていません。とはいえ、ページにAPIキーや内部URL、解析用トークンが直書きされているなら、他の公開ペーストと同じ扱いで先に機微な値を取り除いてから貼ってください。

実際にはどんな種類のHTMLエラーを直せますか?

閉じていないタグ(<p>、<li>、<td>、<span>)、不一致な閉じ、欠けた・不均衡な属性引用符、不正なDOCTYPE、エンティティであるべきところに残っている&/</>、明らかなネストミス(インライン要素の中のブロック要素)などです。足りないコンテンツを勝手に作ったり、有効なマークアップを書き換えたりはしません。

class、id、インラインスタイルが変わりませんか?

変わりません。修復ツールには構文だけを直すよう明示しているので、class名、id、インラインのstyle属性、data-*属性、onclickのようなイベントハンドラーはそのまま通します。出力でこれらが変わって見えたら、それはバグです。

出力はHTML5ですか、XHTMLですか?

HTML5を狙っています。今の主要ブラウザがパースするのはこれです。<br />のようなvoid要素の自己閉じタグは入力としては受け取りますが、出力は標準的なHTML5の形になります。厳密なXHTML出力(今では珍しい)が必要なら、XHTML対応の別ツールを使ってください。

W3Cバリデーターに直接通すのではダメですか?

最後の確認では使うべきです。W3Cバリデーターは何が有効なHTMLかの一次情報源ですから。ただ、エラーを1つずつしか出さず、修正もしてくれません。修復ツールは、まず1パスでドキュメントを閉じきりたいときのもの。そのあとバリデーターで確認する流れです。

アクセシビリティはどうですか? 足りないaltやARIAを足してくれますか?

足しません。これは意図的です。ARIAロールやaltテキストはコンテンツの判断であって構文の判断ではありません。空のalt=""を勝手に足すと、本当のアクセシビリティ問題が見えなくなります。そこは専用のa11y監査(axe、WAVE、Lighthouse)を使ってください。

他に役立つかもしれないHTMLツール

構文を直すのは入り口です。パースが通ったら、次の一手として便利なものを挙げておきます: