hrefの読み方、使い方や意味を解説!

hrefというタグについて、「どう読むの?」「何のためにあるの?」「使い方はどうなるの?」という疑問を持っている方は多いかと思いますので、今回はその疑問について解決できればと考えております。

▼ hrefの読み方

hrefの読み方は以下の3パターンになります。
・エイチレフ
・エッチレフ
・英語の略だと、「Hypertext Reference ※ハイパーテキスト リファレンス」となります。

元々「href」は「aタグ」とセットになるので、「a href」になります。「a href」の読み方は「アンカーエイチレフ」と読みます。

▼ hrefの意味や使い方

hrefはリンクを設定する時に使用するタグになります。基本的には「aタグ」と一緒に使われます。例えば、リンクを設定したい時、タグの内容は下記のように書きます。

【記述内容】
<a href="■■■■■■■■■■■" >●●●●●●●●●●●</a>

備考:
■: リンク先URL
●: アンカーテキスト

このアンカーテキストは、「ページ名」、もしくは「こちらから」や「ここをクリック」などの文言がよく使われているパターンです。例えば下記になります。

「https://www.auncon.co.jp/」のページから
「https://www.auncon.co.jp/seminar/」ページヘのリンクを設定したい場合は、下記のタグ内容を記述します。

例)
<a href="seminar/index.html">セミナー</a>

【イメージ例】

上記にはアンカーテキストとして設定した「セミナー」という文言は、設定したページ上に表示され、そこをクリックすると設定したリンク先ページ(ここでは「seminar/index.html」のページ)へ遷移します。

使い方に関しては、「アンカーテキスト」の他に「画像リンクの設定」も可能です。

例)
<a href="https://www.globalmarketingchannel.com/service/SEO"><img alt="SEO" src="../images/btn_inbound1.jpg" /></a>

上記にはHTML内に設定した「画像」の前に「https://www.globalmarketingchannel.com/service/SEO」ページへの「a href」リンクを設定します。そのバナーをクリックすると、「https://www.globalmarketingchannel.com/service/SEO」ページへ移動します。

▼ その他「a href」に関わる設定内容

・title属性

title属性はリンクに対する説明文になります。これはウェブサイト上でカーソルをリンクに合わせると、title属性に記述されたコメントや説明文が表示される機能を持っています。

【記述内容】
<a href=” ■■■■■” title=” ★★★★★”>●●●●●</a>

備考:
■: リンク先URL
★: リンクに対してコメントや説明文
●: アンカーテキスト

例)
<a href="https://www.auncon.co.jp/">title="アウンコンサルティング株式会社 本サイト" target="_blank"><img alt="" src="https://www.seo-ch.jp/common/images/logo-AUNCON.jpg" /></a>

上記の設定は「https://www.seo-ch.jp」ページ上にあるロゴリンクにtitle属性を記載することにより、カーソルをリンクにあわせると、設定された文言の通り「アウンコンサルティング株式会社 本サイト」が表示されるようになります。

【イメージ例】

・target属性

target属性はリンクをクリックした時に、どのウィンドウで開いてもらうかを指定ができます。それは以下の4パターンがあります。

「 _self 」
リンクをクリックした後、現在表示しているウィンドウで開く形式

「 _blank 」
リンクをクリックした後、別のウィンドウで開く形式

「_top 」
リンクをクリックした後、フレームを解除して表示する形式

「_parent 」
リンクをクリックした後、複数フレームを利用したサイトでフレームを1つ減らして表示する形式

【記述内容】
<href=”■■■■■”target=”_blank”>●●●●●</a>

備考:
■: リンク先URL
●: アンカーテキスト、または画像の格納先

「href」「href属性」という意味や設定方法・使い方や種類について、紹介しましたが、いかがでしたか?
リンクの設定には様々な方法があるので、目的に合わせて設定することが良いと思います。
また、タグ内容の書き間違いやリンク先のURLが間違って設定されたままページを公開することがないように注意していきましょう。

Written by:P.W

Top