HTML 構造解析

機能

• 見出し階層：h1〜h6 を順に、それぞれのテキスト付きで表示（見出し内のインラインタグは透過し、`<h2>Hello <em>world</em></h2>` は `Hello world` と読めます）
• ⚠️ 階層飛びの検出：`<h1>` から `<h3>` へ飛ぶと指摘し、なぜ問題かを説明します
• ⚠️ h1 がない場合は「SPA の骨組みなら正常」と明示 —— 単に 0 を出すだけにしません
• リンク：すべての `<a href>` のアドレスとアンカーテキスト、`rel` と `target`（なければ「（なし）」）を表示し、外部リンクは区別します
• ⚠️ リンクの種類：内部・外部・アンカー・mailto・tel・javascript:（危険。赤で強調し説明を添えます）・ダウンロード・空リンクを分類し、各件数と割合を示します
• 画像：⚠️ alt の欠落と `alt=""` を別々に集計 —— 前者は漏れ、後者は明確な宣言です
• タグ頻度：出現回数順に、各タグの割合も表示。この HTML が何で組み立てられているかが分かります
• 本文テキスト：タグを除いた本文（script と style の内容は除く）。ブロック要素の位置で改行します
• 文書情報：title、lang、meta description、meta viewport
• 集計：バイト数、タグ総数、本文の文字数、コメント数
• ⚠️ タグの補正はしません —— 元のテキストに書かれていることがすべてで、閉じていないタグは閉じていないままです
• ⚠️ 属性値の中の `>` や script の中の `<` で走査がずれません

使い方

1. HTML を貼り付けます（ページ全体でも断片でも可）
2. 本文が欲しい場合は「タグを除いた本文テキストも出力」をオンにします
3. 文書情報 → 見出し階層 → 階層飛び → リンク → 画像 → タグ頻度の順に確認します

よくある質問

ブラウザーの HTML パーサーを使わないのはなぜですか？

パーサーは誤りと見なした HTML を修正しますが、解析ツールが見たいのは元のテキストに書かれていることそのものだからです。閉じていない `<div>` や `<table>` の中でずれたタグは、書き手が知るべき事実です —— 黙って補われれば見えなくなります。構造上の理由もあります：このサイトの変換系ツールはすべて純関数で、`document` に触れるとブラウザーのない環境でテストできなくなります。そのため DOM に依存しないパーサーをサイト全体で共有しています（HTML → Markdown、UBB 変換、XPath も同じものを使っています）。HTML5 の解析アルゴリズムを完全に実装したものではなく、タグとテキストの分割に留まることはページ上に明記しています。

「alt がない」と「alt=""」はどう違うのですか？

大きな違いがあります。alt 属性がないのは漏れで、スクリーンリーダーは画像を説明できず、ファイル名（「IMG_2043.jpg」）を読み上げるしかありません。`alt=""` は「これは装飾用で、読む意味がない」という明確な宣言で、読み上げはスキップされます。両者を一緒に数えると、正しく `alt=""` を書いたページが書き忘れと同じくらい悪く見えます —— しかも直す方向は正反対です：前者は説明を足し、後者はそのままにします。

h1 がないのに正常な場合があるのはなぜですか？

SPA の HTML はしばしば骨組みだけだからです。内容も見出しも JavaScript がブラウザー内で構築するため、サーバーが返す文書に `<h1>` はそもそもありません。検索エンジンにはその場合の扱いがあります。一方、サーバー側で描画する文書やブログ記事で h1 がなければ、たいていは漏れです。どちらなのかはこのツールには判断できないので、両方の可能性を示します。

タグ頻度は何の役に立ちますか？

その HTML が何で組み立てられているかを一目で見るためです。`<div>` だらけならレイアウトを入れ子で作っており、`<table>` が多いなら表か古いレイアウト、`<span>` が異常に多いならリッチテキストエディターからの貼り付けが疑われ、多くの場合簡略化できます。数を示すだけで評価はしません —— 数そのものに良し悪しはありませんが、調べる糸口にはなります。

取り出した本文はそのまま使えますか？

用途によります。「この HTML が概ね何を言っているか」の忠実な要約であり、文字数、要約、内容確認には十分です。ただしレンダリング結果ではありません：CSS の content、JavaScript が挿入したテキスト、`:before` 擬似要素は含まれません。正確な描画テキストが必要なら、ブラウザーの検証ツールかヘッドレスブラウザーを使ってください。

`javascript:` リンクを別扱いするのはなぜですか？

この分類表で唯一安全性に関わる種類だからです。`<a href="javascript:...">` はクリック時にスクリプトを実行し、XSS の典型的な入口であり、テンプレートの連結ミスの痕跡でもあります。他の種類はせいぜい書き方の問題ですが、これは実際の脆弱性になり得ます —— そのため「その他」に埋もれさせず、独立した行として赤で表示し説明を添えています。