a（アンカー）タグのhref属性をマスター！htmlでリンク先を指定する方法を解説

<a href=””>とは

<a href=””>タグの「a」とは、「Anchor（アンカー）」の略で、ハイパーリンクとしての用途で使用します。この記事では、aタグのリンク先を指定する「href属性」の使い方について解説します。

href属性でリンク先を指定

href属性には、リンクがクリックされた時のリンク先を指定します。リンク先には、別のページのURLや、
ページ内のスクロール先などが指定できます。

以下は、href属性に指定できるリンク先の種類です。大きく5種類あります。

では、以降の内容で詳しく見てみましょう。

URL（相対パス）で指定

サイト内の別ページへリンクしたい時などに使用します。相対パスは、現在表示されているURLのページを起点に、リンク先ページのURLを指定します。

次の例は、現在のページと同じフォルダ内にある「page2.html」にリンクを行う例です。

<a id="link" href="page2.html">リンクに表示するテキスト</a>

リンク先のページが、現在のページと別のフォルダに存在する場合は、相対パスでフォルダを指定します。以降で詳しく見ていきましょう。

• サブフォルダの中にあるファイルを指定する場合

<a id="link" href="sub_forlder/page2.html">リンクに表示するテキスト</a>

• 親フォルダにあるファイルを指定する場合

<a id="link" href="../page2.html">リンクに表示するテキスト</a>

• 現在ページのとは、別の階層のフォルダにあるファイルを指定する場合

次のようなフォルダ構造で、「page1.html」から「page2.html」にリンクさせたい場合は、次のように書きます。

【フォルダ構造】

.
├ folder1
│ └ page1.html
└ folder2
　 └ sub_folder
　 　 └ page2.html

【html】

<a id="link" href="../folder/page2.html">リンクに表示するテキスト</a>

URL（絶対パス）で指定

リンク先のページが、別のWebサイトの場合、href属性にしているURLは絶対パスでしちえるする必要があります。

絶対パスは次の例のように、「http://」の部分から全て指定します。

<a id="link" href="http://style.potepan.com/">リンクに表示するテキスト</a>

また最近は、SSLに対応しているサイトが多いため、httpsに対応しているサイトの場合は、次のように「https」でURLを指定しましょう。

<a id="link" href="https://style.potepan.com/">リンクに表示するテキスト</a>

ページ内の特定の場所にスクロール

href属性に、ページ内の要素のID属性を指定すると、その要素へスクロールさせる事ができます。例えば、目次のリンクから、対象の章へジャンプさせる時などで使用します。

<div>
    <p>目次</p>
    <a href="#page-link1">見出し１</a>
    <a href="#page-link2">見出し２</a>
</div>
<h2 id="page-link1">見出し１</h2>
・・・

<h2 id="page-link2">見出し２</h2>
・・・

メール送信・印刷

href属性に次のように記述すると、メール送信用のリンクにすることができます。リンクをクリックすると、利用者の既定のメールアプリが起動し、送信先のメールアドレスを指定した状態でメールの作成画面が表示されます。

<a href="mailto:demo@example.com?subject=件名">メールを送る</a>

スクリプト（JavaScript）の実行

href属性にはJavaScriptも記述できます。リンクがクリックされた時に、スクリプト処理を実行したい時に使用します。

<a href="javascript:alert('demo')">JavaScirptの実行</a>

<a href>のリンクを無効化する方法

ここでは、href属性の指定を無効化する方法を3つ紹介します。

<a>タグは通常、href属性に指定したリンク先へ移動する為に使用しますが、href属性を無効化して、別のスクリプト処理を動かす使い方もします。

ハッシュ（href=”#”）で無効化

以下のように、href属性に”#”（ハッシュ）を入れてリンクを無効化します。

<a  href="#">リンクに表示するテキスト</a>

ただし厳密には、”#”（ハッシュ）は、ページの一番上にジャンプする機能のため、縦長のページで使用した場合、下のイメージ動画のように、ページ上部にスクロールが戻ってしまう為、後述する「JavaScriptで無効化」と組み合わせて使用する必要があります。

javascript:void(0)で無効化

href属性に次のように記述して、リンクを無効化する方法もあります。

<a href="javascript:void(0)">リンクに表示するテキスト</a>

この方法を使用すると、リンクにマウスカーソルを当てると、ブラウザの下の方にhref属性で指定した「javascript:void(0)」が丸見えになってしまい、これを嫌う方もいます。

ポテパンダの一言メモ

void(0)って何
voidはJavaScriptの演算子で、結果を必ず undefind で値を返す性質があります。引数にvoid(0)を渡しているのは慣例的にそうしているのであって、引数は実際に何でも構いません。href属性はundefindを指定すると、何も動作しなくなります。

JavaScriptで無効化

最後に、JavaScriptで<a href=””>タグのリンクを、無効化する方法を紹介します。

・HTML

<a id="link" href="https://style.potepan.com/">リンクに表示するテキスト</a>

・JavaScript

プレーンなJavaScriptで書くと、次のようになります。

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("link").addEventListener("click", function(event) {
        event.preventDefault();
    });
});

JQueryを使用する場合は、次のように書くこともできます。

$(function() {
    $("#link").click(function() {
        return false;
    });
});

まとめ

aタグのリンク先を指定する「href属性」の使い方について解説してきました。

最近では、SEQの内部リンク対策として、Webサイト内のページをリンクでつなぎ、クローラがインデックスしやすいWebサイトにして、検索順位の上位を狙ったりする時にもaタグを使用します。

上記のように、Webサイトの制作現場では、必ずと言っていいほどaタグを使用するため、是非覚えておきましょう。