存在しない id と大文字・小文字の違い
目次のリンクが存在しない id を指していたり、大文字を使って小文字の id に届かなかったりする壊れた例です。
入力
HTML
<a href="#missing">削除した章</a> <a href="#Intro">はじめに</a> <h2 id="intro">はじめに</h2>
固定ヘッダーの高さ(CSS ピクセル。任意)
(空)
結果
エラー 2 件・警告 0 件・情報 0 件
指摘(エラー・警告・情報)
- エラー 1 行目 #missing の飛び先がありません。同じ HTML の中に該当する id が見つかりません。id は大文字・小文字を区別して完全一致が必要です(WHATWG HTML)。リンクか id を直してください。
- エラー 2 行目 #Intro の飛び先がありません。大文字・小文字だけが違う id/name「intro」があります。id は大文字・小文字を区別して完全一致が必要です(WHATWG HTML)。リンクか id を直してください。
| 検査したページ内リンク | 2 件 |
|---|---|
| 届くリンク | 0 件 |
| 届かないリンク | 2 件 |
| 重複している id | 0 種類 |
リンクごとの照合結果
| 番号 | リンク先 | 判定 | 飛び先 | 位置 |
|---|---|---|---|---|
| 1 | #missing | 届かない | 同じ HTML の中に該当する id が見つかりません。 | 1 行目 |
| 2 | #Intro | 届かない | 大文字・小文字だけが違う id/name「intro」があります。 | 2 行目 |
検算(この結果になる理由)
#missing に一致する id も name もなく届きません。#Intro は id="intro" と大文字・小文字が違い、完全一致しないため届きません。大文字・小文字だけの違いを示す指摘が付き、エラーは 2 件です。
判定の根拠は仕様と根拠に、仕様の出典とともにまとめています。自分の入力で試すにはツールをお使いください。
このツールの制約
- 貼り付けた HTML の中だけを照合します。別のページの id へのリンクや、外部のアドレスへの問い合わせはしません。
- JavaScript で後から作られる要素の id や、フレームワークが実行時に付ける id は読み取れません。
- 固定ヘッダーの点検は、style 要素の html・:root の指定と、飛び先の style 属性だけを読む簡易的なものです。外部の CSS ファイルは読めません。
- HTML の構文の誤りを補う複雑な解釈(ブラウザの修復)には対応しません。
ご利用にあたって
- 結果は貼り付けた HTML の文字列だけにもとづく照合です。実際のブラウザでリンクを押して、飛び先を目で確かめてください。