HTML

hrefの設定まとめ

hrefも地味に色々な指定があるのでまとめ。

フルパス(https://example.com/example.php)

プロトコルも含めて指定することができる。
基本的には外部サイトへのリンク時に行う。
https://~で指定するのが基本だが、httpsでアクセスできない外部サイトに対してはやむをえずhttp://~を指定する。

スキーマレス絶対URL(//example.com/example.php)

//から始まるURL指定。
基本的には現在httpのサイトで絶対パスを指定する場合に用いる。httpsへの移行用。
具体的には言語の切り替えをサブドメインで行っている場合や静的ファイルを別ドメインにおいている場合など。

サイトルート相対パス(/example.php)

/から始まるURL指定。href="/"だとトップページ。
同じドメインのパスは基本的にこれで指定する。
ドメインの表記を省略できることで、ドメインやプロトコルが変更になった場合に変更なく対応できる。

相対パス(../../example.html)

.から始まるURL指定。現在のページからの相対パスで指定する。
ディレクトリごと移動してもパスが変更にならない利点があるが、それを考慮するならパスを変数にいれるべきなので基本的に使う利点はない。
プログラミング言語を使わずHTMLだけでサイトを作成する場合に。

ページ内ジャンプ(#example)

#から始まる指定。指定したIDの位置へ飛ぶ。href="#"だとページのトップへ飛ぶ。
IDの指定は<a id="example">ココ</a>というようにid属性を指定する(昔はnameだったが今では非推奨)。
同じ値のid属性はページ内に重複できないので注意。(id="example"が2つあってはいけない)
/example.php#exampleといった形式で他のページへのリンクと複合して指定もできる。
また、#!/paramなどとしてajaxに利用することもある。

クエリ削除(./)

相対パスの応用。
href="./" を指定することで、現在のページでありながらクエリ(?=exampleなど)を消去したURLに遷移できる。
フィルターのリセットなどに。

空指定("")

href="" と指定するとリロードされる...と書いているページもあるが仕様としては見つけられなかった。
ブラウザによっては挙動が異なる可能性もあるので必要ならJSでlocation.reloadなどを行う方が無難。

何もしないリンク

href="javascript:void(0)" や href="#!" がよく使われる。
...が、何もしないのであればaタグの指定が必要な理由を一度再検討した方がいいかもしれない。
マウスオーバー時のポインタ形状などスタイルの問題であればaタグを使わずclassにスタイルをあてるなどで解決すべきだし、JSでリンク先を変更する場合でも何もしないのではなくナビゲーションの表示やaタグを割り当てていない要素との入れ替えなどを行うとUXが向上することも多い。

-HTML