HTML aタグ「相対リンクと」「絶対リンク」の違いを解説

ウェブサイトを構築する際に、ページ間での移動や他のウェブサイトへのリンクを作成するために、<a>タグ（アンカータグ）が使用されます。このタグ内で指定するリンクは、「相対リンク」と「絶対リンク」の二つの形式に大別されます。この記事では、これらのリンクの違いについて詳しく解説します。

絶対リンクとは？

絶対リンクは、ウェブページの完全なURLを指定する方法です。

完全なURLとは、http:// や https://で始まるURLの事です。
URLの構成は、プロトコル（http:// や https://）、ドメイン名（ 例: example.com ）、それ以降のパスが含まれます。絶対リンクは、ウェブ上のどこからでも同じリンク先として識別します。

絶対リンクの例

このリンクは、www.example.com ドメインの page.html という名前のページを指します。

相対リンクとは？

相対リンクは、現在のページからみた、リンク先のURLに基づいて、目的のリンク先場所を指定します。
絶対リンクと異なり、ドメイン名やプロトコルを省略し、現在の位置からの相対的なパスで指定します。

相対リンクの例

現在のページからみて「同じディレクトリ内」の別ページへリンクする場合

このリンクは、ディレクトリ内の「page.html」へのリンクを指定しています。
「./」は同じ階層という意味を持っています。
「./」は省略することが可能です。

現在のページからみて「上の階層のディレクトリ内」のページへリンクする場合

このリンクは、上階層にある「page.html」へのリンクを指定しています。
「../」とページファイル名の前に指定することで、上階層を指定することができます。

現在のページからみて「兄弟階層のディレクトリ内」のページへリンクする場合

このリンクは、兄弟階層「sample」にある「page.html」へのリンクを指定しています。
「../」で上の階層を指定しさらに「sample」を指定することで、兄弟階層として指定ができます。

現在のページと「同じディレクトリ内にある子ディレクトリ」の別ページへリンクする場合

このリンクは、同ディレクトリ内にあるの子ディレクトリ「sample」内にある「page.html」へのリンクを指定しています。

相対リンクと絶対リンクの違い

基準点

• 絶対リンク: ウェブサイトのルート（ドメイン名から始まるパス）を基準にします。
• 相対リンク: 現在のページまたはリンク先のURLを基準にします。

使い分け

• 絶対リンク: 外部サイトへのリンクや、メールマガジンなどウェブサイト外からアクセスするリンクに適しています。
  リンクが指すリソースの場所が変わらない限り、どこからでも同じリソースを指し示します。しかし、ドメインが変わるとリンクを更新する必要があります。
• 相対リンク:
  ウェブサイト内でのページ間のナビゲーションや、構造が変わる可能性がある場合に便利です。
  ウェブサイトの構造が変わっても、同じサイト内のリソースへのリンクが維持されやすいです。

まとめ

相対リンクと絶対リンクは、ウェブサイトを設計する上で重要な役割を果たします。どちらのタイプのリンクを使用するかは、そのリンクの目的とウェブサイトの構造によって決まります。適切に使い分けることで、ウェブサイトのメンテナンスが容易になり、訪問者に良いブラウジング体験を提供できます。