リンクとURLの違いは何ですか？

リンクとURLの違いは何ですか？それは重要ですか？

リンクとURLの違いは、ウェブページ上のコンテンツへの直接パスを取得することについてカジュアルな会話をしているだけであれば問題ありません。すばらしい記事を仲間の1人と共有しているようなものです。

高い（技術的ではない）レベルから、リンクは特定の場所に移動するクリック可能なユーザーインターフェイスを指します。場所はURLで定義されます。

視覚的に リンクは、テキスト要素、画像、ボタン、またはその他のUI要素で表すことができます。これらはすべてHTMLコードで定義されます（詳細は後で説明します）。

クリック可能で、表面の後ろにURLがある場合、それはリンクです。

技術者と非技術者の両方が、リンクとURLという用語を同じ意味で使用しています。これは、書体とフォントを同じものと呼ぶのとほぼ同じです（技術的にはそうではありませんが）。 ）。ただし、技術的に分解し始めると、URLとリンクには違いがあります。

さて、もう少し技術的になりましょう。

URLの技術的構造

URLは通常、次の要素、プロトコル、ドメイン名、トップレベルドメイン、およびスラッグで構成されます。例として、私のタイポグラフィチュートリアルの1つへのURLを使用してみましょう：

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

• https:// プロトコルです
• techstacker ドメイン名です
• .com トップレベルドメインです
• typography-italic-vs-bold ナメクジです

ところで、URLは UniversalResourceLocatorの略です。

通常、上記はリンクと呼ばれます。非技術的な観点からは、それは間違いではありません。ただし、技術的には、URLは一部にすぎません。 リンクを構成するものの。インタラクティブでクリック可能なリンクの上にあるURLを作成するには、それを別の要素と組み合わせる必要があります。これがHTMLの目的です。

HTMLがリンク/URLを定義する方法

通常、Webサイトにリンクが表示されると、それは文の強調表示された部分として表示されます。 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="/article/uploadfiles/202203/2022033109302583.png"
  width="150"
  height="150"
  alt="Eric Cartman"
/>

ここで、this textを置き換えるだけです。 次のような画像要素を使用します：

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

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

画像の上にマウスを移動してみると、このウェブサイトのURLがブラウザの左下隅に表示されます。

画像をクリックすると、アンカー要素内に指定されたURLがあるため、フロントページに移動します。新しいブラウザタブでリンクを開くには、CMD（Mac）またはCTRL（Windows）を押しながらクリックします。

リンクとURLを締結するには

ほとんどの人、技術者または非技術者に尋ねる場合：

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

反対側の人は通常、ブラウザのアドレスバーに移動し、URLをコピーして貼り付けます。彼らがあなたに提供しているのは技術的に URLですが、リンクと呼んでも害はなく、結果は同じです。

ただし、ブログ投稿にリンクを挿入するように求められた場合は、URL以外にさまざまなことがある可能性があります。 検討するのに関連するもの：

• リンクをクリックすると、新しいブラウザタブが開きますか？
• フォローリンクかフォローなしリンクか（SEO関連）？
• リンクはどのような種類のコンテンツをラップアラウンドする必要がありますか？文章？画像？
• その他

そうです、リンクがどのように動作するかについて話し始めたら、 技術が関連するようになり、URLやリンクの提供について話すだけではもはや十分ではありません。また、ユーザーが行きたい場所へのパスをどのように使用し、提示しているかのコンテキストを理解する必要があります。