Web ページのリンクを作る a（アンカー）要素は、HTML の中でも特に基本的なタグです。ただ「リンクを貼る」だけなら簡単ですが、別タブで開く・安全に外部サイトへリンクする・メールや電話を起動するといった使い分けになると、href・target・rel の各属性を正しく理解しておく必要があります。この記事では、a 要素の属性の使い方を初心者の方にも分かるように解説します。
目次
a要素の基本とhref属性
リンクは a 要素の href 属性にリンク先を指定して作ります。href は「どこへ移動するか」を表す、もっとも基本的な属性です。
<!-- 別ページへのリンク -->
<a href="https://example.com">サンプルサイト</a>
<!-- 同じサイト内の別ページ（相対パス） -->
<a href="/about/">このサイトについて</a>
<!-- ページ内の特定の位置（id）へ移動 -->
<a href="#contact">お問い合わせへ</a>href には、外部サイトの URL（絶対パス）、同じサイト内のパス（相対パス）、ページ内の id を指す # 付きの値など、さまざまな形式を指定できます。
target属性でリンクの開き方を指定する
target 属性は、リンク先をどこに開くかを指定します。よく使うのは、別タブ（別ウィンドウ）で開く _blank です。
<!-- 別タブ（別ウィンドウ）で開く -->
<a href="https://example.com" target="_blank">別タブで開く</a>target に指定できる主な値は次のとおりです。普段の制作で意識して使うのは、ほぼ _blank です。
| 値 | 開く場所 |
|---|---|
_self | 同じタブで開く（指定しないときの初期値） |
_blank | 新しいタブ（ウィンドウ）で開く |
_parent | 親フレームで開く（iframe を使うとき） |
_top | フレームを解除して最前面で開く |
target を指定しなければ _self と同じ扱いになり、現在のタブでページが切り替わります。外部サイトへのリンクなど「自分のサイトを開いたまま見てほしい」ときに _blank を使う、と考えると分かりやすいでしょう。
target=”_blank” には rel=”noopener” を添える
target="_blank" で別タブを開くときに、あわせて覚えておきたいのが rel 属性です。rel はリンク元とリンク先の関係性を表す属性で、別タブで開く場合は rel="noopener" を付けるのが推奨されています。
<a href="https://example.com" target="_blank" rel="noopener">
外部サイト（安全に別タブで開く）
</a>noopener を付けないと、別タブで開いたリンク先のページから、window.opener という仕組みを通じて元のタブを操作される可能性があります。悪意のあるサイトに対しては、元のタブを別の URL に書き換えられる（フィッシングに悪用される）といったリスクにつながります。rel="noopener" はこのつながりを断ち切り、リンク先から元のタブへ干渉できないようにします。
なお、現在の主要なブラウザは target="_blank" のリンクに対して自動的に noopener 相当の挙動を適用するようになっています。それでも、明示的に書いておけば古いブラウザでも安全になるため、外部リンクには付けておくのが安心です。よく見かける rel="noopener noreferrer" は、これに加えてリンク先へ参照元（どこから来たか）の情報を送らない noreferrer を組み合わせたものです。
メール・電話を起動するリンク
href には Web ページ以外も指定できます。mailto: でメール作成画面を、tel: で電話の発信を起動できます。スマートフォンサイトの「電話する」ボタンなどでよく使われます。
<!-- クリックでメール作成画面を開く -->
<a href="mailto:info@example.com">メールで問い合わせる</a>
<!-- スマホでタップすると電話を発信 -->
<a href="tel:0312345678">03-1234-5678</a>リンクが正しく動かないときに確認すること
ページ内リンクが飛ばない
href="#contact" のようなページ内リンクは、移動先に同じ名前の id（id="contact"）を持つ要素が必要です。リンク先の id が無かったり、# の後ろの名前が一致していなかったりすると、その位置へ移動できません。リンク先の要素に id が付いているか、名前が合っているかを確認しましょう。
相対パスの基準を勘違いしている
相対パスは、今いるページの場所を基準に解釈されます。先頭に / を付けるとサイトのルート（最上位）からの指定になり、付けなければ現在のページと同じ階層からの指定になります。リンク先が見つからないときは、この基準の違いが原因のことが多いので、パスの先頭を見直してみてください。
まとめ
a 要素は、属性を理解すると表現の幅がぐっと広がります。要点をまとめます。
hrefでリンク先を指定する（URL・相対パス・#id・mailto:・tel:など）target="_blank"で別タブに開く- 別タブで開く外部リンクには
rel="noopener"を添えて安全にする
特に外部サイトへのリンクでは、target="_blank" と rel="noopener" をセットで書く習慣を付けておくと安心です。