HTMLターゲット属性の使用方法

ターゲット属性

target 属性は、ユーザーがリンクをクリックしたときにリンクを開く場所を指定します。

以下のリンクをクリックすると、現在のブラウザのタブ/ウィンドウにあるTechStackerのフロントページに移動します。

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

したがって、別の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経由） 値）。

重要： target="_blank"を使用する場合 おそらくnoopenerを追加する必要があります セキュリティ上の理由から、それと一緒に属性を設定します。少なくとも外部のウェブサイトにリンクするとき。 noopener属性の詳細。