MENU
まろりか
昔から何かを作るのが好きで、趣味の延長で当サイトの運営に至っています。普段はIT会社でプロジェクトマネージャーとして奮闘中ですが、プラベートで当サイトを運営しています。

aタグのhref属性を理解しよう!hrefの読み方と使い方は?href="#"の意味は?

aタグのhref属性について解説

目次

hrefとは

hrefとはaタグの属性の一つで、いくつかあるaタグの属性の中でも一番重要なものとなります。

hrefでリンク先の場所を指定することができます。

hrefの読み方は?

hrefの読み方は「エイチレフ」。

aタグとセットで用いるので、「アンカータグのエイチレフ」と呼ぶことが多いです。

hrefとは何の略?

hrefはhypertext referenceの略で、直訳すると「ハイパーテキストの参照」となります。

少し脱線しますが、ハイパーテキストとは文字通り「テキストを超えるテキスト」のことで、
通常のテキストの機能を超えたテキストのことをいいます。ハイパーテキストを作成するための代表的な言語がHTMLです。

つまり、「hrefとはハイパーテキスト上で参照機能として用いられる属性である」ということができます。

hrefのリンク先種類と使い方

aタグのhref属性について解説1

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上に埋め込んだものが以下になります。
クリックすると私のブログのトップページに移ります。

2階層上のページへ

絶対パス、相対パスがよくわからない場合は、以下のページがわかりやすいと思います。


いまさら聞けない絶対パスと相対パス Win/Mac – Qiita

リンク先としてページ内の特定要素を指定

ページ内の特定要素を指定した場合、指定した先にジャンプすることができます。

なお、事前にリンク先要素にidを付与しておく必要がありますが、
今回は「hrefのリンク先種類」の章にidとして「link-dest」を設定しておきました。

記述の仕方はhrefとして「# + 設定したid」を指定します。

<a href="#link-dest">hrefのリンク先種類</a>

実際にHTML上に埋め込んだものが以下になります。
クリックすると「hrefのリンク先種類」の章にジャンプします。

hrefのリンク先種類

リンク先としてスクリプトを指定

最後にスクリプトの指定についてです。

hrefでスクリプトを指定できることを知っている人は結構少ないのではないかと思いますが、
hrefでJavaScritpを記述できるのです。

例としてクリックすると「Hello」とダイアログがでるケースを紹介します。

HTMLの記述の仕方はhrefとして「javascript: + スクリプト」を指定します。

<a href="javascript:alert('Hello');">「Hello」ってでるよ</a>

実際にHTML上に埋め込んだものが以下になります。
クリックするとJavaScriptにより「Hello」とダイアログが出ます。

「Hello」ってでるよ

href=”#”やhref=””、href=”#!”の意味とは?

aタグのhref属性について解説2

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>は以下のように表示されます。

hrefなし

おわりに

aタグの属性であるhrefついて、使い方を中心に紹介しました。

hrefはよく使うので、この機会に理解を深めてもらえたらうれしいです。

  • URLをコピーしました!
目次