調査
まずhref の中身について許されるものはURL であるが"妥当なURL"についてHTML Living Standard(HTML の正統な最新の仕様書) を調べる。
妥当なURL とは?
https://triple-underscore.github.io/URL-ja.html#valid-url-string
妥当な URL 文字列 は、次のいずれかでなければならない:
- 素片付き相対 URL 文字列
- 素片付き絶対 URL 文字列
素片とはフラグメント"#..." のことである。
今回調査したい"#"は # 文字の前後が空文字列である、"空文字列1#空文字列2" という形であり、空文字列1, 空文字列2 がこの場所にあり得るかを確認していく。
まず空文字列1 は相対パスの表現にあたる。
https://triple-underscore.github.io/URL-ja.html#path-relative-url-string
パス相対 URL 文字列は、次をいずれも満たす文字列でなければならない:
- U+002F (/) で区切られた[0 個以上の URL パス区分文字列]からなる
- U+002F (/) から開始されていない
空文字列1 の場所に"" が許されていると読める。
次に空文字列2 を調べる。ここにはフラグメント名が入る。
https://triple-underscore.github.io/URL-ja.html#url-fragment-string
URL 素片文字列 は、[ 0 個以上の URL 単位からなる並び ]でなければならない。
フラグメント名は"" でよい。
空文字列1 も空文字列2 も妥当なURLであることが確認できた。
結論
href="#" の表現は正しい。(ブラウザで動作確認するとページトップへのジャンプになる)
補足
なお、ページ自身を示す時にはhref 自体を省略することで表現できる。
https://momdo.github.io/html/text-level-semantics.html#the-a-element
サイトがすべてのページに一貫性のあるナビゲーションツールバーを使用する場合、通常ページ自身へリンクするリンクは、a要素を使ってマークアップできる:
<nav> <ul> <li> <a href="/">Home</a> </li> <li> <a href="/news">News</a> </li> <li> <a>Examples</a> </li> <!-- ここに注目. href 属性が省略されている. --> <li> <a href="/legal">Legal</a> </li> </ul> </nav>```
実験してみると、Examples をクリックしたあとページトップにジャンプし、URL の最後に"#" が追加される。なあんだ、href="#" と解釈されているのか。