最新情報をお届け
メルマガ登録はこちら➔

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

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

最新のコラム

Contact us

お問い合わせ

少しでも不明点等ございましたら
お気軽にお問い合わせください。

※こちらからの営業目的の連絡はご遠慮ください。

会社名
ご担当者名
ふりがな
電話番号
メールアドレス
対象URL
お問合せ内容
ご予算

1.弊社からのご案内を希望されるお客様を除き、ご記入いただいた情報はお問い合わせに対するご案内以外には使用しません。
2.弊社からのご案内を希望されるお客様には、弊社からセミナーやキャンペーンに関する情報のご案内やアンケートのご協力をお願いする場合があります。
3.詳細なご相談内容については、必要に応じて別途NDA(機密保持契約)の締結をさせていただきます。
4.弊社は皆様のプライバシーを尊重し、個人情報を保護するために細心の注意を払っています。詳細は、以下のリンクよりご確認ください。

個人情報保護方針(別ウィンドウで開きます)
情報セキュリティ基本方針(別ウィンドウで開きます)

当サイトでは、実在性の証明とプライバシー保護のため、セコムトラストネット株式会社のSSLサーバ証明書を使用し、SSL暗号化通信を実現しています。
GlobalSignステッカーをクリックすると、サーバ証明書の検証結果をご確認いただけます。

Top