1. 解析
ソースを行番号付きのタグの並びとして走査するので、指摘はすべてコード内の位置と結び付きます。
01ソースコード0 文字
02
レンダリング結果はここに表示されます。
HTMLコンパイラ
HTMLをコンパイルして、すっきり1ファイルに
HTML・CSS・JavaScriptを貼り付けてコンパイルできます。マークアップを解析し、閉じ忘れのタグや重複したidを報告。コメントや不要な空白を取り除いて、自己完結型の単一ファイル（またはJavaScriptのテンプレート関数）を出力します。処理はすべてブラウザ内で完結し、必要になったらコンパイル結果を公開URLとして配信できます。
定義
HTMLコンパイラとは？
HTMLコンパイラは、ソースのマークアップを受け取って出荷できる形に整えます。ブラウザと同じようにドキュメントを読み、壊れている箇所や無駄な部分を報告し、最適化済みの成果物——通常はコメント・インデント・冗長な属性を削ぎ落とした1つの圧縮HTMLファイル——を書き出します。
入力を補助するだけのエディタとも、黙って容量を減らすだけのミニファイアとも違います。コンパイラはその両方を提供します。つまり、そのまま手を打てる診断レポートと、クライアントに渡したりメールに添付したりそのままデプロイできる成果物ファイルです。
パイプライン
マークアップに施す4つの処理
コンパイルは毎回同じ流れで進みます。アップロードは一切行わず、各段階の結果はエディタ下のレポートに表示されます。
2. 診断
入れ子構造をスタックで検証し、解析済みのドキュメントから重複id、alt属性の欠落、メタ情報の欠落をチェックします。
3. 最適化
コメントを削除し（条件付きコメントは保持）、空白をまとめ、ブロック要素の間の隙間を詰めて、冗長な属性を取り除きます。
4. 出力
単一ファイルHTML、またはJavaScriptテンプレート関数のいずれかを取得できます。入力と比較できるバイト数も表示されます。
成果物の種類
1つのソース、3つの届け方
エディタ上部で出力形式を切り替えて再コンパイルしてください。診断結果は同じで、変わるのは成果物だけです。
単一ファイルHTML
CSSとJavaScriptはインラインのまま、1つの.htmlファイルにまとめます。バンドルも追加のアップロードも不要です。メールに添付しても、受け取った側でそのまま開けます。
JavaScriptテンプレート
コンパイル済みのマークアップをエスケープし、任意のバンドラーからインポートできるテンプレート関数にします。同じ断片をサーバー側とブラウザ側の両方で描画する場合に便利です。
ホスティングURL
コンパイル結果を公開すると、元のソースではなく最適化済みページを配信する公開リンクを共有できます。
使い方
ソースから成果物まで
登録も、ビルドも、npm installも不要です。
貼り付ける、またはドロップする
サンプルから始める、ローカルの.htmlファイルを開く、エディタ枠にドロップする、いずれでも構いません。
コンパイルしてレポートを読む
コンパイルを押し、診断で指摘された箇所を直してから再コンパイルします。以降の編集は自動で再コンパイルされます。
ダウンロードまたは公開
成果物をコピーする、ダウンロードする、または共有用の公開URLとして公開する、いずれかを選べます。
よくある質問
HTMLコンパイラについてよくある質問
HTMLコンパイラはミニファイアと同じですか？
完全には同じではありません。ミニファイアは容量を減らすだけですが、コンパイラはドキュメントを解析し、閉じ忘れタグ・ネストの不一致・重複id・alt属性の欠落といった問題を、最適化ファイルの出力前に報告します。
コンパイルすると表示結果は変わりますか？
変わりません。最適化で削除するのは描画に影響しないものだけです。コメント、ブロック要素まわりの空白、冗長な属性です。コンパイル結果を新しいタブで開けば、同じように動くか確認できます。
JavaScript出力では何が生成されますか？
コンパイル済みマークアップを文字列として返すテンプレート関数をエクスポートするモジュールです。バッククォート、ドル記号と波括弧、バックスラッシュはエスケープされるため、JSやTSプロジェクトにそのまま貼り付けられます。
CSSやJavaScriptを含むHTMLもコンパイルできますか？
できます。インラインのstyleブロックとscriptブロックは保持されます。styleブロック内のCSSコメントは削除されますが、scriptの内容は実行時を壊さないようそのまま残します。
外部のスタイルシートやスクリプトはインライン化されますか？
されません。リモートのsrcやhrefで参照されているファイルは外部依存として報告され、そのまま残ります。コンパイラはサードパーティのURLを取得しないため、ページの内容が他のサーバーに漏れることはありません。
コンパイル時にコードはアップロードされますか？
されません。解析・診断・最適化はすべてブラウザ内で行われます。公開を押したときだけサーバーに送信され、その内容もコンパイル済みの成果物です。
HTMLエディタとはどう違いますか？
HTMLエディタはライブプレビュー付きの執筆環境です。このコンパイラは、そこにビルドの工程を足したものです。ドキュメントを検証して最適化し、ダウンロードや公開ができる成果物を手渡します。