LoginSignup
0
0

More than 3 years have passed since last update.

疑問: href="#" は正しい表現か?

Posted at

調査

まず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="#" と解釈されているのか。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0