HTML href属性の使い方｜リンク先指定の基本ルールを初心者向けに解説
生徒
「リンクを作るときに、必ずhrefって書いてありますけど、これは何をしているんですか？」
先生
「hrefは、クリックしたときにどこへ移動するかを決める大切な指定ですよ。」
生徒
「文字を青くするためのものではないんですね？」
先生
「見た目ではなく、移動先の住所を書く役割があります。順番に見ていきましょう。」
1. href属性とは何か
href属性は、HTMLでリンク先を指定するための情報です。リンクは、今いる場所から別の場所へ移動するための道のようなものです。hrefには、その道の行き先となる住所を書きます。これがあることで、クリックしたときに正しいページへ移動できます。
2. hrefがないとどうなるのか
hrefを指定しない場合、見た目はリンクのようでも移動できません。これは、宛先の書いていない封筒と同じです。クリックしても何も起こらないため、必ずhrefで行き先を指定する必要があります。
<a href="https://example.com">公式サイトへ移動</a>
3. URL指定の基本ルール
hrefにはURLを指定します。URLとは、Web上の住所のことです。インターネット上のページには必ず住所があり、それを正しく書くことで目的のページにたどり着けます。最初はコピーして貼り付けるだけでも問題ありません。
<a href="https://www.google.com">Googleを開く</a>
4. 同じサイト内へのリンク指定
hrefには、同じサイト内のページも指定できます。この場合は、ファイル名やフォルダの位置を書きます。家の中で部屋を移動するようなイメージです。サイト制作ではよく使われる方法です。
<a href="contact.html">お問い合わせページ</a>
5. 画像リンクとhrefの関係
hrefは文字だけでなく、画像をクリックしたときの移動先にも使われます。画像をaタグで囲むことで、画像全体がリンクになります。メニューやバナーでよく見かける仕組みです。
<a href="index.html">
<img src="/img/sample150-100.png" alt="トップページ">
</a>
6. 新しい画面で開く指定
リンク先を新しい画面や新しいタブで開きたい場合は、aタグにtarget属性を追加します。href属性はクリックしたときのリンク先を指定し、target属性はそのリンクをどのように開くかを指定する役割があります。元のページを残したまま別のWebサイトや参考ページを見てもらいたい場合に便利な書き方です。
<a href="https://example.com" target="_blank" rel="noopener">参考サイトを新しいタブで開く</a>
この例では、href属性に移動先のURLを指定し、target属性に_blankを指定しています。_blankを指定すると、通常はリンク先が新しいタブで開きます。初心者は、hrefがリンク先の住所、targetがリンクの開き方を決める指定と覚えると分かりやすいでしょう。
また、新しいタブで外部サイトを開くリンクでは、rel属性にnoopenerを指定する書き方もよく使われます。まずは、別のページを新しいタブで開きたいときはtarget="_blank"を使い、href属性とは役割が異なることを理解しておきましょう。
7. hrefとSEOの関係
検索エンジンは、href属性で指定されたリンクをたどりながらWebページを見つけ、サイト内のページ同士の関係を理解していきます。そのため、HTMLで正しいリンク先を指定し、関連するページ同士を自然につなぐことは大切です。特に同じサイト内の記事へ移動する内部リンクでは、リンク先の内容が分かる文字を使うと、読者にも検索エンジンにもページの関係が伝わりやすくなります。
<a href="html-basic.html">HTMLの基本構造を初心者向けに解説</a>
この例では、href属性でHTMLの基本構造を説明するページを指定し、リンク文字にも移動先の内容が分かる文章を書いています。単に「こちら」や「詳しく見る」と書くよりも、何についてのページへ移動するのかが分かるリンク文字にすると、利用者がクリックする前に内容を判断しやすくなります。
href属性を使ったリンクでは、数を増やすことよりも、本文と関係のあるページへ分かりやすく案内することが重要です。リンク先が存在しているかも確認し、削除されたページや間違ったURLへのリンクを残さないようにすると、読みやすく移動しやすいWebサイトになります。
8. 初心者が注意したいポイント
href属性を使うときに初心者が特に注意したいのは、URLやファイル名の入力ミスです。リンク先の文字を一文字でも間違えると、クリックしても目的のページを開けないことがあります。また、HTMLファイルの名前や保存場所を変更したのにhref属性を修正していない場合も、リンク切れの原因になります。
<a href="contact.html">お問い合わせページを開く</a>
この例では、contact.htmlというファイルが実際に存在している必要があります。ファイル名がcontacts.htmlだったり、別のフォルダに保存されていたりすると正しく移動できません。リンクを作成したあとは、実際にクリックして目的のページが開くか確認することが大切です。
また、リンク文字にも注意しましょう。「こちら」や「クリック」だけでは移動先の内容が分かりにくいため、「お問い合わせページを開く」のように、リンク先が何のページなのか分かる文章にすると利用者にも親切です。href属性は正しいリンク先を指定し、リンク文字は移動先の内容が伝わるように書くことを意識すると、分かりやすいHTMLになります。
まとめ
HTMLのhref属性は、リンクをクリックしたときにどこへ移動するのかを指定するための重要な属性です。HTMLでWebページを作るとき、別のページへ移動するリンクを作るにはaタグを使いますが、aタグだけでは移動先が決まりません。そこでhref属性を使い、移動先となるURLやファイル名、ページ内の位置などを指定します。HTML初心者は、href属性を文字の色を変えるための指定と考えてしまうことがありますが、hrefは見た目を変更するものではなく、リンク先の住所を設定する役割を持っています。
hrefという名前は、リンク先を参照するための情報を表しています。Webページでは、リンクをクリックすると別のページへ移動したり、同じサイト内の別ページを開いたりできます。このとき、ブラウザはhref属性に書かれた情報を確認し、指定された場所へ移動します。つまり、aタグがリンクそのものを作るタグで、href属性がリンクの行き先を決める情報だと考えると分かりやすくなります。
href属性を使った基本的なリンクの書き方
href属性を使ったリンクは、aタグの開始タグの中にhrefを書いて作成します。hrefの値には、移動させたいWebページのURLやファイル名などを指定します。リンクとして画面に表示する文字は、aタグの開始タグと終了タグの間に書きます。
<a href="https://example.com">公式サイトを見る</a>
このHTMLでは、公式サイトを見るという文字がリンクになります。利用者がリンクをクリックすると、href属性に指定されたURLへ移動します。href属性の値は引用符で囲んで記述するのが基本です。URLを間違えると目的のページへ移動できないため、リンクを作成したあとは実際にクリックして正しく開けるか確認することも大切です。
外部サイトと同じサイト内のリンクを使い分ける
href属性には、インターネット上にある別のWebサイトのURLだけでなく、自分のサイト内にある別のHTMLファイルも指定できます。外部サイトへ移動する場合は、URL全体を指定する方法が分かりやすいでしょう。一方で、同じフォルダ内にあるHTMLファイルへ移動する場合は、ファイル名だけを指定することもできます。
<a href="about.html">このサイトについて</a>
<a href="contact.html">お問い合わせ</a>
この例では、現在のHTMLファイルと同じ場所にabout.htmlとcontact.htmlが保存されていることを想定しています。同じサイト内のページ同士をリンクでつなぐことを内部リンクと呼ぶことがあります。内部リンクを分かりやすく配置すると、訪問者が関連するページへ移動しやすくなり、サイト全体を回りやすくなります。
HTML初心者が同じサイト内のリンクを作るときは、ファイル名だけでなくフォルダの位置にも注意が必要です。リンク先のHTMLファイルが別のフォルダにある場合は、その場所まで含めてhref属性に指定します。リンク先のファイル名や保存場所を変更した場合は、href属性も合わせて修正しないとリンク切れになることがあります。
画像にもhref属性を使ったリンクを設定できる
href属性を使ったリンクは、文字だけに設定するものではありません。aタグの中にimgタグを入れることで、画像全体をクリックできるリンクにすることもできます。ブログのバナー、商品画像、サイトのロゴなどをクリックすると別ページへ移動する仕組みは、この方法で作ることができます。
<a href="index.html">
<img src="/img/sample150-100.jpg" alt="トップページへ移動">
</a>
このHTMLでは画像をaタグで囲んでいるため、画像をクリックするとindex.htmlへ移動します。href属性はリンク先を指定し、imgタグのsrc属性は表示する画像の場所を指定しています。この二つは役割が異なるため混同しないようにしましょう。hrefは移動先、srcは表示する画像の場所というように整理すると覚えやすくなります。
新しいタブでリンクを開く場合の考え方
href属性はリンク先を決めるための属性ですが、リンクをどのように開くかは別の属性で指定できます。例えば、現在見ているページを残したまま別のページを新しいタブで開きたい場合は、aタグに追加の属性を指定します。hrefが移動先を担当し、別の属性が開き方を担当すると考えると、HTMLの役割を整理しやすくなります。
<a href="https://example.com" target="_blank" rel="noopener">参考サイトを見る</a>
この例でもhref属性が担当しているのはリンク先の指定です。target属性によって新しいタブで開く指定を行い、rel属性も合わせて記述しています。初心者のうちは、すべてを一度に暗記するよりも、まずhrefは行き先を決める属性だと理解しておくことが大切です。
href属性と内部リンクの関係
Webサイトでは、トップページ、プロフィール、サービス紹介、お問い合わせ、ブログ記事など、複数のページをhref属性によるリンクでつないでいきます。ページ同士が適切につながっていると、訪問者は目的の情報へ移動しやすくなります。特にブログでは、記事本文の中から関連する別の記事へリンクすることで、読者が同じテーマについて続けて学びやすくなります。
リンク文字も重要です。例えば、詳しくはこちらという文字だけでは、リンク先に何があるのか分かりにくい場合があります。HTMLのhref属性の使い方を見る、HTMLのaタグの基本を確認するというように、リンク先の内容が分かる文字にすると、利用者がクリックする前に移動先を想像しやすくなります。
検索エンジンもhref属性で指定されたリンクを手掛かりとしてページを発見することがあります。そのため、関連するページ同士を自然につなぎ、リンク切れを減らすことは、分かりやすいWebサイトを作るうえで重要です。ただし、リンクを大量に並べればよいというものではありません。本文の内容に関係するページを必要な場所から分かりやすく案内することが基本です。
href属性で初心者が間違えやすいポイント
href属性でよくある間違いの一つが、URLやファイル名の入力ミスです。一文字でも違っていると、目的のページが開けないことがあります。また、HTMLファイルの名前を変更したのに、href属性に以前のファイル名が残っているとリンク切れになります。Webサイトのページ構成を変更したときは、関連するリンクも確認する習慣を付けるとよいでしょう。
大文字と小文字やフォルダ名にも注意が必要です。開発している環境によっては、ファイル名の大文字と小文字を別の名前として扱うことがあります。自分のパソコンではリンクが動いていても、Webサーバーへ公開したあとに開けなくなることもあるため、ファイル名やhref属性は同じ表記にそろえておくことが大切です。
もう一つの注意点は、aタグとhref属性を別々のものとして理解することです。aタグはリンクを作るためのHTMLタグで、hrefはそのaタグに追加してリンク先を指定する属性です。タグと属性は役割が異なります。HTMLの属性とは、タグに追加の情報を与えるための指定です。href以外にも、画像の場所を指定するsrc属性や、画像の説明を指定するalt属性などがあります。
href属性を理解すると、Webサイトのメニュー、記事内リンク、関連記事へのリンク、画像リンクなど、多くの場所で同じ仕組みが使われていることに気付きます。基本となる考え方は変わりません。aタグでリンクを作り、href属性で移動先を指定するという形です。この基本を覚えておけば、HTML初心者でもさまざまなリンクを作成できるようになります。
HTMLのhref属性は、WebページとWebページをつなぐ重要な役割を持っています。外部サイトへのリンクでも、同じサイト内の内部リンクでも、画像リンクでも、href属性がリンク先を指定します。Webサイトは一枚のページだけで完結することは少なく、多くのページがリンクによってつながっています。そのため、href属性の書き方、URLの指定方法、ファイル名の指定、リンク文字の分かりやすさを理解しておくことは、HTMLの基本を学ぶうえで非常に重要です。
生徒
「href属性は、リンクの文字を作るものではなく、リンク先を指定するためのものなんですね。」
先生
「そうです。aタグがリンクを作り、href属性がクリックしたときの移動先を決めます。」
生徒
「別のWebサイトだけでなく、自分のサイトのHTMLファイルも指定できるんですよね。」
先生
「はい。同じフォルダにあるページならファイル名を指定できます。サイト内の関連するページをつなぐときにもhref属性を使います。」
生徒
「画像をクリックして移動するリンクもhrefを使うんですか？」
先生
「使います。画像をaタグで囲み、aタグのhref属性に移動先を書けば、画像全体をリンクにできます。」
生徒
「hrefとsrcは少し似て見えますが、役割は違うんですね。」
先生
「hrefはリンクの移動先を指定し、srcは画像などの読み込み元を指定します。何の場所を指定しているのかを考えると区別しやすくなります。」
生徒
「リンクを作ったあとは、実際にクリックして確認したほうがよさそうですね。」
先生
「その確認は大切です。URLやファイル名が間違っているとリンク切れになるので、目的のページへ正しく移動できるか確認しましょう。」
生徒
「リンク文字も、移動先が分かる内容にしたほうがいいんですよね。」
先生
「はい。href属性を正確に指定することに加えて、何のページへ移動するリンクなのか分かる文字にすると、読みやすく使いやすいWebページになります。」
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
HTMLのhref属性とは何ですか？aタグのhref属性は何のために使うのですか？
href属性は、HTMLでリンク先のURLやページの移動先を指定するための属性です。aタグと組み合わせて使うことで、クリックしたときに指定したWebページやHTMLファイルへ移動できます。hrefはリンクを作るための基本であり、HTML初心者が最初に覚えたい重要な属性です。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
