ホームページを自分で作っていると、「ここをクリックしたら別のページに移動するようにしたい」「文章にリンクを貼りたい」と思うことがあります。
普段何気なく使っている Webサイト には、さまざまな場所にリンクが設定されています。
例えば、「詳しくはこちら」をクリックして別のページを開いたり、画像をクリックして別のサイトへ移動したり、記事の目次からページの途中へ移動したりするのもリンクです。
では、こうしたリンクは HTML でどのように作るのでしょうか？
HTML では、aタグ というタグを使ってリンクを作ります。
さらに、aタグ の中に href という属性を指定して、クリックしたときの移動先を設定します。
この記事では、HTML や Web制作 をこれから学び始める方に向けて、ホームページのリンクについて基本からわかりやすく解説します。
「リンクとは何か」という基本から、aタグ、アンカータグ、リンクタグ、href属性 といった言葉の意味まで順番に整理していきます。
また、ホームページで使われるリンクを、
・他のサイトへ移動する「外部リンク」
・同じページ内を移動する「ページ内リンク」
・自分のサイトの別ページへ移動する「内部リンク」
の3種類に分けて紹介します。
この記事でリンクの基本的な仕組みを理解したうえで、それぞれの具体的な貼り方を関連記事で学んでいきましょう。
ホームページの「リンク」の基本とは？
「リンク」という言葉は知っていても、HTML ではどのように作られているのかまでは知らない方も多いでしょう。
ここでは、ホームページのリンクとは何か、HTML ではどのようにリンクを作るのかを基本から解説します。
HTMLではaタグを使ってリンクを作る
では、このようなリンクを HTML で作るにはどうすればよいのでしょうか。
HTML では、基本的にaタグ（エータグ）を使ってリンクを作ります。
例えば、次のように記述します。
<a href="https://www.yahoo.co.jp/">YAHOO！JAPANはこちら</a>これをブラウザで表示すると、
というリンクになります。
その文字をクリックすると、href に指定したページへ移動します。
ここでは、まず「HTML でリンクを作るときは aタグ を使う」と覚えておけば大丈夫です。
リンクのコードを分解してみよう
<a href=”https://www.yahoo.co.jp/”>YAHOO！JAPANはこちら</a>
この1行には、それぞれ次のような役割があります。
| 部分 | 役割 |
|---|---|
| <a> | リンクを作るためのタグ |
| href | リンク先を指定する属性 |
| https://www.yahoo.co.jp/ | リンク先のURL |
| YAHOO！JAPANはこちら | クリックする文字 |
| </a> | aタグを終了する記述 |
つまり、aタグ でリンクを作り、href で「どこへ移動するのか」を指定するという仕組みです。
例えば、
<a href=”https://www.yahoo.co.jp”>YAHOO！JAPANはこちら</a>
の場合、「YAHOO！JAPANはこちら」がクリックできる部分で、https://www.yahoo.co.jp がクリックしたときの移動先になります。
この基本形を理解しておくと、これから出てくるさまざまなリンクの書き方も理解しやすくなります。
リンクは文字だけではない
リンクを設定できるのは、文字だけではありません。
画像にもリンクを設定できます。
例えば、バナー画像をクリックすると別のページへ移動するような仕組みも、リンクの一つです。
<a href="リンク先">
<img src="banner.jpg" alt="詳しくはこちら">
</a>この場合は、画像をクリックすると href に指定したリンク先へ移動します。
Webサイト では、文章中のリンクだけでなく、バナーや画像、ボタンなどにもリンクが設定されていることがあります。
ただし、HTML を初めて学ぶ場合は、まず文字にリンクを設定する基本から覚えるとよいでしょう。
言葉の整理！「aタグ」「アンカータグ」「リンクタグ」の違いは？
HTML では、「aタグ」「アンカータグ」「リンクタグ」という言葉を見かけることがあります。
それぞれの意味が分かりにくいかもしれませんが、aタグ とアンカータグは基本的に同じものです。
一方、「リンクタグ」は正式な HTMLタグ の名称ではありません。
ここでは、それぞれの意味と違いを整理します。
aタグ（エータグ）とは？
aタグ は、HTML でリンクを作るために使うタグです。
<a href="https://example.com">サイトを見る</a><a>の「a」は、英語の Anchor（アンカー）に由来します。
Anchor には、船をその場に留めておくための「錨（いかり）」という意味があり、Webページ上のある場所（現在地）から、別のページや別の場所（目的地）へと繋ぎ止めるためのリンクを設定するタグ、と考えるとイメージしやすいと思います。
HTML でリンクを作るときは、aタグ を使うと覚えておけば大丈夫です。
アンカータグとは？
アンカータグは、aタグ の別名です。
そのため、
・aタグ
・アンカータグ
は基本的に同じものを指します。
HTML の教材や Web制作 の記事で「アンカータグ」という言葉が出てきても、aタグ とは別のタグだと考える必要はありません。
「リンクタグ」とは？
「リンクタグ」は、aタグ がリンクを作るためのタグであることから、aタグ を指して使われることがあります。
ただし、「リンクタグ」という正式な HTMLタグ があるわけではありません。
また、HTMLには <link> という別の要素があります。
<link rel="stylesheet" href="style.css"><link> は、CSSファイル など外部のリソースとの関係を指定するために使うもので、aタグ のように Webページ 上でクリックできるリンクを作るものではありません。
つまり、次のように整理できます。
| 呼び方・要素 | 役割 |
|---|---|
| aタグ | クリックできるリンクを作る |
| アンカータグ | aタグの別名 |
| リンクタグ | aタグを指して使われることがある呼び方 |
| link要素 | CSSなど外部リソースとの関係を指定する |
リンクに不可欠な「href（エイチレフ）」属性とは？
aタグを使ってリンクを作るとき、必ずセットで覚えておきたいのが href（エイチレフ）属性 です。
これがないと、せっかく aタグ を書いても「どこにも移動できないボタン」になってしまいます。
hrefはリンク先を指定するための属性
aタグ を使ってリンクを貼る際の、基本的な書き方は次のとおりです。
<a href="移動先">クリックする文字</a>このコードの中にある、
href=”移動先”
という部分が、「クリックしたときにどこへ移動するのか」という目的地を指定しています。
例えば、次のように記述します。
<a href="https://example.com">公式サイトを見る</a>この場合、href=” ” のダブルクォーテーションの間に指定した https://example.com が、リンク先になります。
「公式サイトを見る」という文字をクリックすると、指定した URL のページへ移動します。
つまり、aタグ と href には、それぞれ次のような役割があります。
・aタグ：リンクを作る
・href属性：リンク先を指定する
この2つをセットで使うことで、クリックしたときに目的のページへ移動できるようになります。
hrefは「リンク先の住所」と考えるとわかりやすい
HTML を初めて学ぶ方は、href を「移動先の住所」に例えて考えると分かりやすいでしょう。
例えば、誰かに手紙を送るときは、封筒に相手の住所を書きます。
住所が分からなければ、手紙をどこへ届ければよいのか分かりません。
ホームページのリンクも同じです。
リンクをクリックしたときに「どこへ移動すればいいのか」を指定する必要があります。その移動先を指定するのが href です。
<a href="https://www.yahoo.co.jp/">YAHOO!JAPANサイトを見る</a>の場合、href の中に書かれた https://www.yahoo.co.jp/ が、リンク先の「住所」にあたります。
「hrefにはリンク先を書く」
と覚えておけば、まずは十分です。
ホームページのリンクは大きく分けて3種類
href には具体的にどのような移動先を指定できるのでしょうか。
ホームページで使われるリンクは、「どこへ移動するか」によって、次のように大きく3種類に分けて考えられます。
・他のWebサイトへ移動する「外部リンク」
・同じページ内を移動する「ページ内リンク」
・自分のサイトの別ページへ移動する「内部リンク」
ここでは、それぞれの基本的な仕組みを見ていきます。
他のサイトへ飛ばす「外部リンク」
外部リンクとは、自分のホームページから、別の Webサイト へ移動するリンクのことです。
例えば、自分のホームページから、
・メーカーの公式サイト
・SNS
・関連サービス
・参考サイト
などへ案内する場合に使います。
基本的には、href にリンク先となる Webサイト の URL を指定します。
<a href="https://www.yahoo.co.jp/">YAHOO!JAPANサイトを見る</a>ブラウザでの表示結果
これで、「YAHOO!JAPANサイトを見る」をクリックすると、指定した Webサイト へ移動できます。
⇒ホームページから他のサイトへリンクを貼るHTMLの書き方と別タブ（ウインドウ）で開く設定方法
同じページ内で移動する「ページ内リンク」
同じ HTMLページ の中にある特定の場所へ移動するリンクです。
例えば、長い記事の目次にある「まとめ」をクリックすると、ページ下部に「まとめ」の見出しまで移動する、といった使い方があります。
ページ内リンクでは、href に「#」から始まる名前を指定し、移動先の要素に「id」を設定します。
例えば、リンクする側を、
<a href="#about">詳しい説明を見る</a>とし、移動先を、
<h2 id="about">詳しい説明</h2>とします。
「詳しい説明を見る」をクリックすると、id=”about” を設定した場所まで移動します。
このように、href=”#名前” と移動先の id を組み合わせるのがページ内リンクの基本です。
ページ内リンクの仕組みや、ページ上部から途中の見出しへジャンプする具体的な方法については、次の記事で詳しく解説します。
⇒ホームページ 同一ページ内リンクの貼り方｜ページ途中、上部、下部へ移動する方法
自分のサイトの別ページへ飛ばす「内部リンク」
内部リンクとは、自分で作っている Webサイト 内の別のページへ移動するリンクのことです。
例えば、
・トップページ → 会社概要
・トップページ → お問い合わせ
・商品一覧 → 商品詳細
・ブログ一覧 → 個別記事
などが内部リンクにあたります。
同じ階層にあるページへリンクする場合は、ページのファイル名を指定して、
<a href="about.html">会社概要</a>のように記述できます。
ただし、リンク先のページが別のフォルダに入っている場合は、ページ同士の位置関係によって書き方が変わります。
例えば、
・同じ階層にあるページ
・下の階層にあるページ
・上の階層にあるページ
・../を使って上の階層へ移動する場合
・相対パスを使ってリンク先を指定する場合
・別ページの特定の場所へ移動する場合
などがあります。
このあたりから、HTML のファイル構成や相対パスについての理解も必要になってきます。
内部リンクについては、次の記事で具体的な書き方を解説します。
⇒
3種類のリンクを一覧で整理
| リンクの種類 | 移動先 | href の例 |
|---|---|---|
| 外部リンク | 他のWebサイト | https://www.yahoo.co.jp/ |
| ページ内リンク | 同じページの特定箇所 | #～ |
| 内部リンク | 自サイトの別ページ | ファイル名など |
