HTMLの<a>（リンク・アンカー）要素のしくみと使い方を徹底解説

HTMLの<a>（ハイパーリンク）要素が、Web上でクリックできるインタラクティブなリンクを定義するためにどのように使われるのか、その基本をわかりやすく解説します。

HTMLでは、<a>タグを使ってリンク（ハイパーリンク）要素を定義します。

<a>リンク要素</a>

リンク要素は「アンカー（anchor）要素」とも呼ばれます。

リンクとハイパーリンクの違い

リンクとは、インターネット上の場所を指定するアドレスのことです。
ハイパーリンクとは、クリックすることで何かを起動したり、Webサイトなどの目的地へ移動したりできる「リンクの一種」です。

日常会話では、ほとんどの人が「ハイパーリンク」と「リンク」を同じ意味で使っています。

<a>要素の使い方

<a>要素には複数の属性を指定できますが、最も重要なのがhref属性です。ユーザーがリンクをクリックしたときの移動先（URL）を指定するために使われます。

クリックするとTechStackerのトップページへ移動するリンクの例を見てみましょう。

<a href="https://techstacker.com">TechStackerのトップページへ</a>

このリンクは、次の要素で構成されています。

開始タグ：<a>
属性名：href
属性値："https://techstacker.com"（リンク先のURL）
リンクテキスト：TechStackerのトップページへ（ユーザーに表示される部分）
終了タグ：</a>

実際の表示は次のようになります。

TechStackerのトップページへ移動する。

絶対URLと相対URLの違い

href属性の値（リンク先のURL）には、「絶対URL」または「相対URL」のどちらかを指定できます。先ほどの例は絶対URLです。

<a href="https://techstacker.com">TechStackerのトップページへ</a>

こちらは、同じWebサイト内の記事へ移動する相対URLの例です。

<a href="/html-tags-vs-html-elements-difference">HTMLタグとHTML要素の違い</a>

同じ記事への絶対URLは次のとおりです。

<a href="https://techstacker.com/html-tags-vs-html-elements-difference">HTMLタグとHTML要素の違い</a>

絶対URLが相対URLよりも多くの情報を含んでいることに注目してください。

プロトコル（https）
ドメイン名（techstacker.com）
スラッグ（/html-tags-vs-html-elements-difference）

一方、相対URLにはスラッグしか含まれていません。

では、それぞれどのような場面で使い分ければよいのでしょうか。

相対URL：自分のWebサイト内のコンテンツへリンクするときに使う
絶対URL：他のWebサイトのコンテンツへリンクするときに使う

相対URLを使えるのは、自分のWebサイトと同じサーバー上に保存されているコンテンツを参照する場合だけです。それ以外の場合は、必ず絶対URLを使いましょう。

HTMLタグとHTML要素の違いがよくわからないという方は、「HTMLタグとHTML要素の違い」を解説した記事もあわせて参考にしてください。

さて、もうひとつ、よく使われる重要な属性があります。特にSEOの観点から知っておくと役立ちます。

target属性の使い方

リンク要素のもうひとつの便利な属性がtarget属性です。ユーザーがクリックしたときに、リンクをどこで開くかを指定できます。

次のリンクをクリックすると：

<a href="https://techstacker.com/">トップページへのリンク</a>

現在表示しているのと同じブラウザタブ（ウィンドウ）でTechStackerのトップページに移動します。つまり、他のWebサイトへのリンクを貼ると、ユーザーはあなたのサイトから離れてリンク先へ移動してしまうのです（意図した動作の場合もあれば、そうでない場合もあります）。

これは、<a>要素がデフォルトでtarget="_self"という属性値を持っているためです。「ユーザーが現在いるのと同じウィンドウでリンクを開く」という意味になります。

つまり、次のリンク要素は：

<a href="https://techstacker.com/"></a>

ブラウザには、次のように解釈されています。

<a href="https://techstacker.com/" target="_self"></a>

コード上には表示されないため混乱しやすい点ですが、これで仕組みがわかりましたね。

リンクを新しいタブで開きたい場合は、デフォルトの_selfの代わりに_blankを指定します。

<a href="https://youtube.com" target="_blank" rel="noopener">クリックするとYouTubeが新しいタブで開きます</a>

target属性はいつ使うべき？

シンプルに言えば、SEOなどの理由でユーザーを自分のWebサイトから離したくない場合は、target="_blank"を使いましょう。

そうでなければ、何も指定しなくてOKです。リンクはデフォルトで同じブラウザウィンドウ内で開きます（_selfの動作）。

見出しをリンクにする方法

見出しを含む多くのHTML要素をリンクとして使えます。実際、これは非常によく使われる手法です。リンクにしたい要素を<a></a>タグで囲むだけで実現できます。

<a href="/html-for-beginners">
  <h3>HTML for Beginners</h3>
</a>

画像をリンクにする方法

リンク要素を使えば、画像をリンクにすることもできます。たとえば、記事のサムネイルや商品ページへのリンクなどが挙げられます。やり方は簡単で、画像要素<img>をリンク要素<a></a>で囲むだけです。

<a href="/tags/html">
  <img src="../../thumbnails/html.png" />
</a>

上記の例では、画像をクリックするとHTML記事のセクションへ移動します。

実際の表示は次のとおりです（クリックしてみてください）。