HTML リンク：絶対 URL

JPKODA 編集部 May 5, 2026

前章では、相対パスを使用して同じ Web サイト内のページ間をリンクする方法を学びました。

今回は、外部サイト（例えば Google や百度など）にリンクする方法を学習します。これには「絶対 URL」を使用する必要があります。これにより、ユーザーは自サイト以外のリソースへ簡単にアクセスできるようになり、真の意味での「インターネット」を構築することが可能になります。

1. 絶対 URL を理解する

絶対 URL（Absolute URL）は、フル URL とも呼ばれ、インターネット上のリソースの完全な住所を提供します。

リンクをどのページに配置したとしても、絶対 URL にはそのリソースを特定するために必要なすべての情報が含まれています。これは、現在のページからの相対的な位置のみを指定する相対パスとは対照的です。

一般的な絶対 URL は、以下の要素で構成されています。

プロトコル (Protocol / Scheme): リソースにアクセスするために使用するプロトコルを指定します（例：https:// や http://）。

ドメイン名 (Domain): Web サイトの名前（例：www.example.com）。これは、サイトをホストしているサーバーの、人間が読める住所です。
パス (Path): サイトのファイルシステム内におけるリソースの具体的な場所（例：/about や /products/shoes）。
クエリパラメータ (Query Parameters) [任意]: サーバーに渡す追加情報（例：?search=HTML）。疑問符 ? の後に続きます。
フラグメント識別子 (Fragment Identifier) [任意]: ターゲットページ内の特定のセクションを指定します（例：#introduction）。リンクをクリックすると、ブラウザはその部分まで自動的にスクロールします。

https://www.example.com/products/shoes?color=blue#size-chart

この例では：

外部サイトへのリンクを作成する場合も、引き続き <a> タグと href 属性を使用します。唯一の違いは、href 属性に完全な絶対 URL を記述することです。

Web サイトのトップページへのリンク。

<a href="https://www.example.com">Example.com を訪問する</a>

クリックすると、ユーザーは example.com のトップページへ遷移します。

Web サイト内の具体的なページへのリンク。

<a href="https://www.example.com/about">私たちについて</a>

クリックすると、ユーザーは example.com の "about" ページへ遷移します。

検索結果ページなどへのリンク。

<a href="https://www.example.com/search?q=HTML+tutorial">HTML チュートリアルを検索</a>

注意：URL 内のスペースは通常、+ または %20 にエンコードされます。

ページ内の特定の場所へのリンク。

<a href="https://www.example.com/documentation#installation">インストール手順へジャンプ</a>

クリックすると、ページが遷移するだけでなく、ID が installation であるセクションまで自動的にスクロールします。

絶対 URL を使用する際は、以下のガイドラインに従ってください。

常にプロトコル (https://) を含める: モダンなブラウザは補完を試みることもありますが、セキュリティと正確性の観点から https:// を明示的に記述するのが最善です。
URL を再確認する: URL が正しく、ターゲットサイトが実在することを確認してください。タイポ（打ち間違い）は「リンク切れ（Broken links）」の最も一般的な原因です。
記述的なテキストを使用する: リンクテキストは、ユーザーがどこへ行くのかを明確に示すべきです。「ここをクリック」などの曖昧な表現は避けましょう。
ユーザー体験を考慮する: 外部リンクを新しいタブで開くべきかどうかを検討してください（これについては次課の target 属性で解説します）。
リンクの死活監視: 外部サイトはリニューアルや閉鎖が行われることがあります。定期的にサイトをチェックし、無効になったリンクを修正しましょう。

絶対 URL は、世界中のリソースを繋ぎ合わせる「インターネットの住所」です。

この使い分けをマスターすることで、信頼性が高く、ナビゲーションのしやすい Web サイトを構築できるようになります。