リンクとURLの違いとは？技術的な構造とHTMLでの実装方法を徹底解説

リンクとURLの違いは何か、そしてその違いを意識する必要はあるのでしょうか？

ウェブページ上のコンテンツへの直接の経路について雑談しているだけであれば、リンクとURLの違いはそれほど重要ではありません。たとえば、友人に素晴らしい記事を共有するときなどがその典型です。

大まかな（非技術的な）レベルで言うと、リンクとはクリックできるユーザーインターフェースのことであり、特定の場所へ移動させるためのものです。そして、その行き先はURLによって定義されます。

見た目上、リンクはテキスト要素、画像、ボタン、その他のUI要素として表現できます。これらはすべてHTMLコードで定義されています（詳細は後述します）。

つまり、クリックできて、その表面下にURLが埋め込まれていれば、それはリンクだと言えます。

実際のところ、技術者も非技術者も「リンク」と「URL」という用語を同じ意味で使っています。これは、書体（タイプフェイス）とフォントを同じものとして扱うのとよく似ています（厳密には別物ですが）。ただし、技術的に分解し始めると、URLとリンクには明確な違いが存在します。

では、少し技術的な話に入っていきましょう。

URLの技術的な構造

URLは通常、プロトコル、ドメイン名、トップレベルドメイン、スラッグという要素で構成されます。例として、タイポグラフィに関するチュートリアルページのURLを見てみましょう：

https:/techstacker.com/typography-italic-vs-bold

• https:// はプロトコル
• techstacker はドメイン名
• .com はトップレベルドメイン
• typography-italic-vs-bold はスラッグ

ちなみに、URLはUniversal Resource Locator（ユニバーサル・リソース・ロケーター）の略称です。

日常会話では、上記のような文字列は一般的に「リンク」と呼ばれます。非技術的な観点からは間違いではありません。しかし技術的には、URLはリンクを構成する一部にすぎません。上記のURLをインタラクティブでクリック可能なリンクにするには、別の要素と組み合わせる必要があります。その役割を担っているのがHTMLです。

HTMLはどのようにリンク／URLを定義するのか

通常、ウェブサイト上でリンクを目にするとき、それは文章の中で強調表示された部分として表示されています。TechStackerのトップページへ誘導するこのテキストのようなイメージです。

• 見た目上、強調されたテキストはクリック可能なリンクとして表示されます。
• 視覚的な表面の下には、行き先となる場所を持ったURLが存在します。

リンクテキストとURLはどちらも、HTMLのアンカー要素 <a> の内部で定義されます。

HTMLアンカー要素には href 属性が含まれ、その値が参照元となります。この値こそが、クリックした人をあなたが指定した目的地へ連れて行くURLなのです。

TechStackerのトップページへのリンクを含む段落のHTMLコードは、次のようになっています：

<p>
  Usually when people talk about links, they refer to a highlighted part of a
  sentence, like <a href="https://techstacker.com">this text</a> that leads to
  TechStacker’s front page.
</p>

テキスト以外のUI要素でもリンクを作成できる

画像をリンクとして機能させ、クリックしたときにユーザーを特定の場所へ誘導したいとしましょう。その場合、画像要素 <img> をアンカー要素で囲むだけで実現できます。

まず、先ほどのHTMLサンプルからアンカー要素を取り出します：

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

そして、こちらの画像要素を用意します：

<img
  src="https://jp.wsxdn.com/UploadFiles_5590/202203/2022033109302583.png"
  width="150"
  height="150"
  alt="Eric Cartman"
/>

あとは、アンカー要素内の「this text」を画像要素に置き換えるだけです：

<a href="https://techstacker.com">
  <img
    src="https://jp.wsxdn.com/UploadFiles_5590/202203/2022033109302583.png"
    width="150"
    height="150"
    alt="Eric Cartman"
  />
</a>

その結果、リンクとして機能する画像が完成します：

画像の上にマウスカーソルを重ねてみてください。ブラウザの左下にこのウェブサイトのURLが表示されるはずです。

画像をクリックすると、アンカー要素内に指定されたURLによってトップページへ移動します。新しいブラウザタブでリンクを開きたい場合は、MacならCMDキー、WindowsならCTRLキーを押しながらクリックしてください。

まとめ：リンク vs URL

ほとんどの人（技術者でも非技術者でも）に対して、次のようにお願いしてみてください：

• 「Xに関するウェブサイトのURLを教えて」
• 「Xに関するウェブサイトへのリンクを教えて」

いずれの場合も、相手は通常、ブラウザのアドレスバーを開いてURLをコピー＆ペーストしてくれるでしょう。相手が提供してくれたのは技術的にはURLですが、「リンク」と呼んでも実害はありません。結果は同じだからです。

しかし、ブログ記事にリンクを挿入するよう依頼された場合は、URL以外にも考慮すべきポイントがいくつかあります：

• クリックしたときに新しいブラウザタブで開くべきか？
• followリンクにするか、no-followリンクにするか（SEO関連）？
• リンクで囲むのはどのようなコンテンツにするか？テキスト？画像？
• その他諸々。

つまり、リンクの挙動について話し始めると、技術的な詳細が重要になってきます。単に「URLやリンクを提供する」という言葉だけでは不十分となり、ユーザーを行き先へ導くための経路を、どのように活用し、どのように提示するのかという文脈まで理解しておく必要があるのです。