先頭へのリンク・name・日本語の id
href="#" と大文字の #TOP による先頭へのリンク、古い name、パーセントエンコードされた日本語の id が混在した例です。
入力
HTML
<a href="#">先頭へ</a> <a href="#TOP">先頭へ</a> <a name="old"></a> <a href="#old">旧アンカー</a> <a href="#%E6%97%A5%E6%9C%AC%E8%AA%9E">日本語の章</a> <h2 id="日本語">日本語</h2>
固定ヘッダーの高さ(CSS ピクセル。任意)
(空)
結果
エラー 0 件・警告 0 件・情報 2 件
指摘(エラー・警告・情報)
- 情報 2 行目 #old は id ではなく a 要素の name に届いています。name は古い書き方なので、id への置き換えをおすすめします。
- 情報 3 行目 #%E6%97%A5%E6%9C%AC%E8%AA%9E はパーセントデコードして 日本語 として照合し、届きました(WHATWG HTML)。
| 検査したページ内リンク | 4 件 |
|---|---|
| 届くリンク | 4 件 |
| 届かないリンク | 0 件 |
| 重複している id | 0 種類 |
リンクごとの照合結果
| 番号 | リンク先 | 判定 | 飛び先 | 位置 |
|---|---|---|---|---|
| 1 | # | 届く | ページの先頭 | 1 行目 |
| 2 | #TOP | 届く | ページの先頭(特別な名前) | 1 行目 |
| 3 | #old | 届く | name="old" の a 要素(2 行目) | 2 行目 |
| 4 | #%E6%97%A5%E6%9C%AC%E8%AA%9E | 届く | id="日本語" の要素(パーセントデコード後)(4 行目) | 3 行目 |
検算(この結果になる理由)
# だけは空のフラグメントで先頭に届き、#TOP は同名の id がなければ大文字・小文字を無視して先頭に届きます。#old は a 要素の name に、%E6%97%A5%E6%9C%AC%E8%AA%9E は UTF-8 でデコードした「日本語」の id に届きます。エラーは 0 件です。
判定の根拠は仕様と根拠に、仕様の出典とともにまとめています。自分の入力で試すにはツールをお使いください。
このツールの制約
- 貼り付けた HTML の中だけを照合します。別のページの id へのリンクや、外部のアドレスへの問い合わせはしません。
- JavaScript で後から作られる要素の id や、フレームワークが実行時に付ける id は読み取れません。
- 固定ヘッダーの点検は、style 要素の html・:root の指定と、飛び先の style 属性だけを読む簡易的なものです。外部の CSS ファイルは読めません。
- HTML の構文の誤りを補う複雑な解釈(ブラウザの修復)には対応しません。
ご利用にあたって
- 結果は貼り付けた HTML の文字列だけにもとづく照合です。実際のブラウザでリンクを押して、飛び先を目で確かめてください。