【HTML初心者入門】href属性とは?使い方も解説! | WEBCAMP NAVI
【1月の受講枠も残りわずか】

【HTML初心者入門】href属性とは?使い方も解説!

html href

「hrefってそもそも何?どうやって読むの?」
「href属性で指定できるリンク先を知りたい」

HTMLを学習している中で、href属性について上記のような悩みを抱えていませんか?

今回の「WEBCAMP NAVI」では、HTML学習初心者に向けて、以下の内容について紹介します。

  • hrefのとはなんの略?読み方など基本知識
  • hrefで使えるリンクの種類
  • ページ内で使えるリンクの紹介
  • hrefのサンプルコード

hrefの基本について、順を追いながらしっかりとみていきましょう。

hrefとは【リンク先を指定する役割】

hrefの読み方は「エイチレフ」または「エッチレフ」と読みます。

「a href」の場合、「アンカーエイチレフ」とセットで読まれることが多いです。

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

hrefとはa(アンカー)タグの属性の一つで、いくつかあるaタグの属性の中でも一番重要なもので、主にhrefでリンク先の場所を指定することが役割になっています。

a タグ自体はアンカーの意味で、リンク元(到達点)、リンク先(出発点)の双方を指定できるタグです。

href 属性が指定された a 要素は「出発点」を意味します。

----------------------------------------------------------------------------------------------------------------------------------

転職成功率98%の【DMM WEBCAMP】で需要の高まるITエンジニアに転職しよう!
フルタイムのコミット型学習と手厚いキャリアサポート!
万が一転職できない場合は、全額返金の転職保証付き!
条件を満たすことで最大56万円のキャッシュバックも受けられます。
まずはお気軽に無料カウンセリングへ!

\参加者満足度99%!/
エンジニア転職のプロに無料で相談する!
※最短1分で申し込み可能

リンクの種類

hrefで指定できるリンクの種類を大きく分けると以下の5つがあります。

  • URL(相対パス)
  • URL(絶対パス)
  • ページ内の特定要素
  • 他プロトコル(メールなど)
  • スクリプト

このようにいくつかありますが、その中でも初心者の方が疑問を持ちやすいのは「URLの相対パス・絶対パスをリンク先に指定する」という概念です。
この概念はとても重要なので、考え方と指定する方法をご紹介します。

URL(相対パス)

まずはリンク先にURL(相対パス)を指定する方法についてです。

相対パスは現在のページを起点にリンク先ページの場所を指定する形です。

相対パスと絶対パスがわからない方には少し難しいと感じるかもしれません。
例えを使いながらサイト構造の基礎を確認していきましょう。

今ご覧のこのページのURLは以下のようになっています。

https://web-camp.io/magazine/archives/7504

「/」で細かく区切られているのがわかりますよね。
これは区切ることでサイト内の階層を表しています。
「/」で区切られた階層を左側から順に見ていくと、右になるほど階層の低い細かい指定になります。
ここまでがサイト構造の説明です。

例えばこのページから「WEBCAMP NAVI」のトップページにリンク先にしたいとします。
そこでこのページを基準に(相対パスの考え方)1つ上の階層へ戻ることを意味する「..」を使ってトップページのリンク先のURLは以下の通りになります。

HTML
<a href="../..">「WEBCAMP NAVI」トップページ</a>

実際にHTML上に相対パスで埋め込んだものが以下になります。
クリックすると「WEBCAMP NAVI」のトップページのウィンドウが開きます。

「WEBCAMP NAVI」トップページ

お分かりいただけたでしょうか?

とにかく、相対パスは今のページを基準にサイト内を移動することができます。

URL(絶対パス)

次にリンク先にURL(絶対パス)を指定する方法についてです。
hrefのリンク先として一番よく使われるのが、この絶対パスのURLです。

家の住所と同じようなもので、世界中の誰が見ても参照できる位置を示します。

例えば、先ほど相対パスの例に使った「WEBCAMP NAVI」のトップページも絶対パスなら以下のように記述します。

HTML
<a href="https://web-camp.io/magazine">「WEBCAMP NAVI」トップページ</a>

実際にHTML上に絶対パスで埋め込んだものが以下になります。
クリックすると「WEBCAMP NAVI」のトップページのウィンドウが開きます。

「WEBCAMP NAVI」トップページ

ページ内の特定部分にリンクする

リンク先のページに移動し、更にページの特定部分に移動するとさらに分かりやすくなる時がありますよね。

その場合は、hrefが「出発点」に対し、「到達点」として指定のできるname属性やid属性を使用することで、特定部分への移動が可能になります。

これは、同一ページ内移動にも使用できます(リンク先ページは自分自身で、name属性だけ変更する)。
特定部分へのリンクは「#」を先頭につけて指定します。

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

href属性と一緒にaタグで使える属性をここで紹介します。
ここに記載している属性は

  • カーソルをリンクに合わせるとコメントが表示
  • リンク先を別のウインドウで開く

といったことができるようになります。
ここでhref属性と一緒に押さえておきましょう。

title属性

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

HTML
<a href=”リンク先URL” title=”リンクに対してコメントや説明文”>アンカーテキスト</a>

target属性

target属性はリンクをクリックした時に、どのウィンドウで開いてもらうかを指定ができます。

HTML
<href=”リンク先URL”target=”_blank”>アンカーテキストまたは画像</a>

target属性には以下の4パターンがあります。

「 _self 」

リンクをクリックした後、現在表示しているウィンドウで開く形式です。
デフォルトはこの状態なので、特別な場合以外を除き指定する必要はないです。

「 _blank 」

リンクをクリックした後、別のウィンドウで開く形式
これはtarget要素の中で一番使用される頻度が高いです。

「_top 」

リンクをクリックした後、フレームを解除して表示する形式です。
つまりフレーム分割をしている時、分割を解除し、ウィンドウ全体でページ遷移します。

「_parent 」

リンクをクリックした後、複数フレームを利用したサイトでフレームを1つ減らして表示する形式です。
「_top」との違いが分かりにくいかと思いますが、「_parent」はフレームの中でも子要素の中でページ遷移します。

----------------------------------------------------------------------------------------------------------------------------------

国内最大級のプログラミングスクール【DMM WEBCAMP】
手厚いキャリアサポートと高品質の学習カリキュラムで驚異の転職成功率98%!
あなたも、IT業界で輝くエンジニアになりませんか?
本気で人生を変えたい方は、ぜひ無料カウンセリングへ!

\参加者満足度99%
エンジニア転職のプロに無料で相談する!
※最短1分で申し込み可能

サンプル

hrefの基本知識や使い方が分かったところで、実際にhrefが使われているコード例を紹介します。

以下のコードをお手持ちのエディタにペースとしてみてください。
そうすればその下の画像のような画面が表示されるかと思います。

また、今回のhrefの用法を思い出しながらコードを見るとさらに勉強になるかと思います。

HTML
<!DOCTYPE html>
<html>
<head>
<span><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></span>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>[TEST]リンク形成</title>
</head>
<body>
<span><a href="index.html">相対パスリンク</a><br></span>
<a href="http://www.google.co.jp/">絶対パスリンク</a><br>
<a href="../index.html">ひとつ上のディレクトリのindex.html</a><br>
<a href="mailto:test@test.com">メール</a><br>
<a href="../index.html#test">index.htmlページ内の[test]へ移動する</a><br>
</body>
</html>

コードをエディタで表示させた図

以下の記事ではHTMLのサンプルコードを紹介しています。
テンプレートを活用して、Webページ作成したい方におすすめです。

【初心者向け】おすすめのHTMLのテンプレート7選!

まとめ

いかがだったでしょうか?

今回「WEBCAMP NAVI」では、HTML学習初心者の方向けに「href」について以下の内容を紹介してきました。

  • hrefの基本知識
  • hrefで使えるリンクの種類
  • ページ内で使えるリンクの紹介
  • hrefのサンプルコード

href属性はWebサイトを作成する上で基本となりますので、しっかりと抑えて今後のHTML学習に生かしていきましょう。

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 1 2020年4月時点