HTML <a>（リンク/アンカー）要素のしくみ

HTML（<a> ）ハイパーリンク要素は、Web上のインタラクティブリンクを定義するために使用されます。

HTMLでは、<a> タグは、リンク/ハイパーリンク要素を定義するために使用されます：

<a>Link element</a>

リンク要素はアンカーとも呼ばれます要素。

リンクとハイパーリンク：

リンク インターネット上の場所を指定するアドレスです。
ハイパーリンク タイプのリンクですクリックして何かをアクティブにしたり、Webサイトなどの目的地に移動したりできます。

会話の中で、ほとんどの人は「ハイパーリンク」と「リンク」を同じ意味で言います。

「a」要素の使用方法

<a> 要素はいくつかの属性を取りますが、最も重要なものはhrefです。属性。ユーザーがリンク（URL）をクリックしたときにリンク先（URL）を提供するために使用されます。

クリックするとTechStackerのフロントページに移動するリンクの例を次に示します。

<a href="https://techstacker.com">Go to TechStacker’s front page.</a>

上記のリンクには、次の構成要素が含まれています。

リンクタグを開く<a>
属性名：href
属性値："https://techstacker.com" （リンクURL /宛先）
リンクテキストGo to TechStacker’s front page. （ユーザーに表示）
リンクタグを閉じる</a>

上記のリンクが実際にどのように見えるか：

TechStackerのフロントページに移動します。

絶対URLと相対URL

属性値（リンク/ URL宛先）は、絶対のいずれかです。または相対 URLパス。前の例は絶対URLです：

<a href="https://techstacker.com">Go to TechStacker’s front page.</a>

これこのウェブサイトの記事につながる相対URLです：

<a href="/html-tags-vs-html-elements-difference"
  >HTML Tags vs. HTML Elements.</a
>

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

<a href="https://techstacker.com/html-tags-vs-html-elements-difference"
  >HTML Tags vs. HTML Elements.</a
>

絶対URLに注目してください相対URLよりもはるかに多くの情報があります：

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

相対URLにはスラッグのみが含まれます。

では、いつどちらを使用しますか？

相対URLを使用する自分のウェブサイトのコンテンツにリンクするとき。
絶対URLを使用 他のウェブサイトのコンテンツにリンクするとき。

相対URLを使用して、同じサーバーに存在する（保存されている）コンテンツを参照することしかできません。あなたのウェブサイトが含まれています。それ以外の場合は、絶対URLを使用してください。

HTMLタグとHTML要素の違いについて混乱している場合は、HTMLタグとHTML要素についての記事を読むことをお勧めします。

わかりました。特にSEOに関しては、一般的に使用され、知っておくことが重要な属性がもう1つあります。

ターゲット属性

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

このリンクをクリックした場合：

<a href="https://techstacker.com/">Link to front page</a>

現在表示しているのと同じブラウザタブ/ウィンドウでTechStackerのフロントページに移動します。つまり、別のWebサイトにリンクすると、ユーザーはWebサイトから移動し、リンク先の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"
  >If you click this, the YouTube website opens in a new tab</a
>

いつどのを使用しますか？

簡単な答えは次のとおりです。ユーザーをウェブサイトから移動させたくない場合。 SEOの目的で、target="_blank"を使用します。

それ以外の場合は何もしないでください。リンクはデフォルトで同じブラウザウィンドウで開きます（_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記事セクションに移動します。

実生活でどのように見えるか（クリックしてみてください）：