hrefとは
hrefとはaタグの属性の一つで、いくつかあるaタグの属性の中でも一番重要なものとなります。
hrefでリンク先の場所を指定することができます。
hrefの読み方は？
hrefの読み方は「エイチレフ」。
aタグとセットで用いるので、「アンカータグのエイチレフ」と呼ぶことが多いです。
hrefとは何の略？
hrefはhypertext referenceの略で、直訳すると「ハイパーテキストの参照」となります。
少し脱線しますが、ハイパーテキストとは文字通り「テキストを超えるテキスト」のことで、
通常のテキストの機能を超えたテキストのことをいいます。ハイパーテキストを作成するための代表的な言語がHTMLです。
つまり、「hrefとはハイパーテキスト上で参照機能として用いられる属性である」ということができます。
hrefのリンク先種類と使い方
hrefのリンク先種類
hrefではリンク先を指定できますが、
リンク先として指定できる種類には大きく以下の5種類があります。
- URL（絶対パス）
- URL（相対パス）
- ページ内の特定要素
- 他プロトコル（メールやFTP）
- スクリプト
この中でも一番利用されるのはURL（絶対パス）です。
他のものは頻繁には使わないと思うので、まだ知らない人は徐々に覚えていけばいいと思います。
hrefの使い方
hrefのリンク先種類で紹介したリンク先種類の中から、
URL（絶対パス）、URL（相対パス）、ページ内の特定要素、スクリプト、について使い方を紹介します。
リンク先としてURL（絶対パス）を指定
hrefのリンク先として一番よく使われるのがURL（絶対パス）です。
リンク先ページとしてURLの絶対パスを指定します。
例えば、以下のように指定すると私のブログのトップ画面に遷移できます。
<a href="https://www.marorika.com/">ブログトップページへ</a>
実際にHTML上に埋め込んだものが以下になります。
クリックすると私のブログのトップページに移ります。
リンク先としてURL（相対パス）を指定
次はURL（相対パス）についてです。
絶対パスではリンク先ページの絶対パスを指定しましたが、今回は相対パスを指定します。
絶対パスと相対パスがわからないと理解が難しいかもしれないませんが、
相対パスは現在のページを起点にリンク先ページの場所を指定する形です。
例えば、今見ているこのページのURLは「https://www.marorika.com/entry/href」なので、
トップページをリンク先にする場合は「../..」と指定してあげます。（「..」は1つ上の階層へ戻ることを意味します。）
全体としては以下のように記述します。
絶対パスより短くて簡潔ですが、URLの階層をしっかり理解していないと使えません。
<a href="../..">2階層上のページへ</a>
実際にHTML上に埋め込んだものが以下になります。
クリックすると私のブログのトップページに移ります。
絶対パス、相対パスがよくわからない場合は、以下のページがわかりやすいと思います。
いまさら聞けない絶対パスと相対パス Win/Mac – Qiita
リンク先としてページ内の特定要素を指定
ページ内の特定要素を指定した場合、指定した先にジャンプすることができます。
なお、事前にリンク先要素にidを付与しておく必要がありますが、
今回は「hrefのリンク先種類」の章にidとして「link-dest」を設定しておきました。
記述の仕方はhrefとして「# + 設定したid」を指定します。
<a href="#link-dest">hrefのリンク先種類</a>
実際にHTML上に埋め込んだものが以下になります。
クリックすると「hrefのリンク先種類」の章にジャンプします。
リンク先としてスクリプトを指定
最後にスクリプトの指定についてです。
hrefでスクリプトを指定できることを知っている人は結構少ないのではないかと思いますが、
hrefでJavaScritpを記述できるのです。
例としてクリックすると「Hello」とダイアログがでるケースを紹介します。
HTMLの記述の仕方はhrefとして「javascript: + スクリプト」を指定します。
<a href="javascript:alert('Hello');">「Hello」ってでるよ</a>
実際にHTML上に埋め込んだものが以下になります。
クリックするとJavaScriptにより「Hello」とダイアログが出ます。
href=”#”やhref=””、href=”#!”の意味とは？
href=”#”の意味とは
いろんなWebサイトのHTMLを見ているとたまに見かけるhref="#"。
hrefのリンク先に#しか記載されておらず特定のidが指定されていないように見えますが、
この場合はページのトップに遷移することになります。
<a href="#">ページトップへ移動</a>
デモですが、以下をクリックするとページのトップに移動するはずです。
href=””の意味とは
hrefの指定をカラにすると現在のページに遷移する意味合いになります。
つまり、ページがリロードされます。
<a href="">ページのリロード</a>
デモですが、以下をクリックするとページがリロードされます。
href=”#!”の意味とは
href="#!"も時々見かけますが、意味合いとしてはaタグをクリックしてもどこにも遷移させない場合に指定します。
idとして!を指定することはないだろうという前提のもと、#!と設定するのが慣例となっています。
なので、!のid部分はページ内に存在しないidであれば、実はなんでも良いのです。
<a href="#!">遷移しないリンク</a>
デモですが、以下をクリックしてもどこにも遷移しないはずです。
遷移させないのであればそもそもhrefを設定しなければいいかと思うかもしれませんが、
HTML5になる前の時代ではhref属性自体をなくすとaタグがリンクとして機能せず、リンクのスタイル（見た目）でなくなってしまうことがありました。
HTML5ではaタグにhref属性は必ずしも必要ではなく、表示上もリンクのスタイルになります。
href属性をつけないaタグはプレースホルダリンクと呼ばれ、
リンクとして暫定的に機能させずに後からリンク先を指定するような場合に使用します。
<a>hrefなし</a>は以下のように表示されます。
おわりに
aタグの属性であるhrefついて、使い方を中心に紹介しました。
hrefはよく使うので、この機会に理解を深めてもらえたらうれしいです。