【初心者向け】HTMLでハイパーリンクを作成する方法を徹底解説

HTMLのハイパーリンク（hyperlink）を使うと、別のページへ移動できるようになります。リンクは<a>タグで定義され、href属性にはクリック時にユーザーが移動する先のURLを指定します。開始タグ<a>と終了タグ</a>の間に記述したテキストが、画面に表示されるアンカーテキストとなります。

Webページを作っていると、他のページや外部サイトを参照したい場面が出てきます。たとえばブログ記事の中で「関連するこちらの記事もどうぞ」といった形でリンクを貼ることはよくあるでしょう。

ハイパーリンクとは、あるWebページから別のWebページをつなぐ仕組みのことで、ユーザーは複数のページを素早く行き来できます。自サイト内のページへのリンクにも、まったく別のWebサイトへのリンクにも使えます。

この記事では、HTMLにおけるハイパーリンクの基本を解説します。リンクのターゲット指定、ブックマーク用アンカーの作り方、メールアドレスやページ内要素へのリンク方法まで、順番に見ていきましょう。

HTMLハイパーリンクとは

HTMLのハイパーリンクは、別のWebリソースを指し示すものです。リンクは開始タグ<a>と終了タグ</a>の間に定義され、この2つのタグで囲まれたテキストをクリックすると、指定されたリソースへ移動します。

ハイパーリンクは<a>タグで作成します。基本的な構文は次のとおりです。

<a href="your_url">ここをクリックするとURLへ移動します。</a>

<a>タグで囲んだテキストが、開始タグのhref属性で指定したURLへのリンクになります。href属性には移動先を指定します。絶対URL（例：https://www.example.com）でも、サイト内の相対的な場所を示す相対URLでも構いません。

以下は、特定のサイトのトップページへリンクする例です。

<a href="https://www.careerkarma.com">Career Karma</a>

リンクの表示状態の種類

ブラウザ上で表示されるリンクには、主に3つの状態があります。

• 未訪問リンク：青色で表示される
• 訪問済みリンク：紫色で表示される
• アクティブリンク：クリック中は赤色で表示される

多くのWebサイトではCSSでこれらの色を上書きしているため、実際の表示は異なることがありますが、HTMLでスタイルを設定できるリンクの基本状態はこの3つです。

リンクのターゲット（target属性）

リンクの開き方は自由に変更できます。たとえば「新しいタブで開きたい」というケースはよくありますよね。現在閲覧中のページを残したまま、別タブでリンク先を表示できれば、ユーザーは元のページを見失わずに済みます。

これを実現するのがtarget属性です。target属性を使うと、リンク先のリソースをどこに表示するかをブラウザに指示できます。

指定できるターゲットは次の4種類です。

• _self：同じウィンドウ・同じタブで開く（デフォルト値）
• _parent：親フレーム（親ウィンドウ）で開く
• _blank：新しいウィンドウまたは新しいタブで開く
• _top：ブラウザ全体のウィンドウで開く

それぞれの使い方の例を見てみましょう。

<a href="https://www.careerkarma.com" target="_self">同じタブで開きます。</a>
<a href="https://www.careerkarma.com" target="_parent">親ウィンドウで開きます。</a>
<a href="https://www.careerkarma.com" target="_blank">新しいタブで開きます。</a>
<a href="https://www.careerkarma.com" target="_top">全画面のブラウザウィンドウで開きます。</a>

ブックマークアンカー

HTMLのハイパーリンクは、ドキュメント内の特定の場所を指すこともできます。長いページの途中にある特定のセクションへ、ユーザーを直接誘導したいときに便利な機能です。

ブックマークアンカーを使うには、まずジャンプ先となる要素にID属性を設定します。見出しにIDを付ける例は次のとおりです。

<h3 id="subtitle3">小見出し3</h3>

見出しタグにid「subtitle3」を付けました。このIDをリンクから参照できます。

この見出しへジャンプするリンクの例はこちらです。

<a href="#subtitle3">小見出し3へ移動</a>

href属性にはURLではなく、リンク先要素のIDを指定します。IDの前にシャープ記号（#）を付けることで、「同じページ内の要素」であることをブラウザに伝えます。

HTMLアンカータグの使い方

HTMLのアンカータグとは<a>タグのことです。このタグでユーザーを別のWebリソースへ誘導し、href属性でクリック時の移動先を定義します。

アンカータグの実例集

ここからは、<a>タグの具体的な使用例をいくつか見ていきましょう。

相対URLによるリンク

同じサイト内のリソースへリンクする場合は、相対URLを使えます。相対URLはローカルリンクとも呼ばれ、「https://www.sitename.com」のような形式を使いません。代わりに、ローカルサーバー上のファイルパスを直接指定します。

たとえば、Career Karmaのサイト内から同サイトのブログへリンクを張る場合を考えてみましょう。自分のサイト内へのリンクなので、絶対URLではなくローカルURLを使えます。コードは次のようになります。

<a href="/blog">Career Karmaブログ</a>

このテキストをクリックすると、サイト内の「/blog」リソースへ移動します。

メールアドレスへのリンク

アンカータグはメールアドレスへのリンクにも使えます。メールリンクをクリックすると、ユーザーの既定のメールソフトが起動し、指定した宛先にメッセージを送信するかどうか尋ねられます。

メールアドレスへリンクするには、href属性の値を「mailto:」プロトコルで始めます。例は以下のとおりです。

<a href="mailto:nothing@google.com">メールを送る！</a>

このリンクをクリックすると、メールソフトが起動し、宛先「nothing@google.com」への送信画面が開きます。

ページ内要素へのリンク

アンカータグは、Webページ上の特定の要素へのリンクにも利用できます。リンク先の要素に付けたIDを指定すればOKです。たとえば「テスト見出し」という見出しへジャンプさせたい場合、次のようなコードを書きます。

<a href="#test_heading">テスト見出しへジャンプ</a>

<h2 id="test_heading">テスト見出し</h2>

リンクをクリックすると、ページはid「test_heading」を持つ要素の位置までスクロールします。

まとめ

HTMLのハイパーリンクを使えば、ページやリソース同士をつなげられます。自サイト内のコンテンツへのリンクにも、外部サイトへのリンクにも活用できます。この記事では、HTMLドキュメントでハイパーリンクを使う方法を基本から解説しました。

ここまでの内容を押さえれば、あなたもHTMLでハイパーリンクを自在に操れるはずです！

さらにHTMLの学習を進めたい方は、ぜひ当サイトの「HTML学習ガイド」も参考にしてみてください。