target 属性は「リンクを“どの窓で開くか”を決めるスイッチ」
<a> タグの target 属性は、
「このリンクをクリックしたとき、どこで開くか」 を指定するためのものです。
行き先そのものを決めるのは href。
その “開き方” を決めるのが target。
つまり、
href = 行き先の住所
target = どの窓で開くか
という役割分担になっています。
target の代表的な値とその意味
_self（デフォルト）＝今のタブで開く
<a href="/about" target="_self">このサイトについて</a>
target="_self" は
「今開いているタブでそのまま遷移する」という意味です。
実は、target を書かないと自動的に _self になります。
普段のページ遷移はほぼこれです。
_blank＝新しいタブで開く（最もよく使う）
<a href="https://example.com" target="_blank" rel="noopener">
公式サイト（新しいタブで開く）
</a>
_blank は
「新しいタブ（またはウィンドウ）で開く」 という指定。
外部サイトへ飛ばすときによく使われます。
ただし、_blank には重要な注意点があります。
必ず rel="noopener"（または noopener noreferrer）をセットで付けること。
理由は後ほど深掘りします。
_parent と _top（フレームを使う特殊なケース）
現代の Web ではあまり使いませんが、
iframe やフレーム構造の中で使う値です。
_parent
一つ上のフレームで開く
_top
フレームをすべて無視して、最上位のウィンドウで開く
普通の Web ページではほぼ使わないので、
初心者のうちは _self と _blank だけ覚えれば十分です。
target=”_blank” を使うときの超重要ポイント：rel=”noopener”
なぜ rel=”noopener” が必要なのか
target="_blank" を付けると、
リンク先のページは 元のページを操作できてしまう ことがあります。
具体的には、
リンク先のページが window.opener を使って
元のページを書き換えたり、
悪意あるページにリダイレクトさせたりできる可能性があります。
これを防ぐのが rel="noopener"。
<a href="https://example.com" target="_blank" rel="noopener">
新しいタブで開く
</a>
noopener を付けると、
リンク先から window.opener が使えなくなり、
元のページが安全になります。
target=”_blank” を使うときは、
rel=”noopener” をセットで書くのが現代の標準ルール。
画像リンクやボタン風リンクでも target は使える
画像をクリックして新しいタブで開く
<a href="large-photo.jpg" target="_blank" rel="noopener">
<img src="thumb.jpg" alt="写真のサムネイル">
</a>
画像をクリックして大きい画像を開くときなどに便利です。
ボタン風のリンクでも target は有効
<a href="https://example.com" class="btn" target="_blank" rel="noopener">
外部サイトへ
</a>
見た目はボタンでも、
「ページ遷移」なら <a> を使うのが正しいです。
target を使うべき場面・使わないべき場面
使うべき場面：外部サイトへ飛ばすとき
ユーザーが「戻る」操作をしやすいように、
外部サイトは新しいタブで開くことが多いです。
例：SNS、公式サイト、外部資料など。
使わない方がいい場面：サイト内のページ遷移
サイト内のページを _blank で開くと、
タブが増えすぎてユーザーが混乱します。
サイト内リンクは基本 _self（デフォルト）で OK。
JavaScript と target の関係
JS でリンクを制御するときも target は有効
<a href="/download" id="dl" target="_blank" rel="noopener">ダウンロード</a>
document.querySelector("#dl").addEventListener("click", (e) => {
console.log("ダウンロードリンクがクリックされました");
});
この場合、
JavaScript の処理が走った後、
新しいタブで /download が開きます。
JS で target を動的に変えることもできる
const link = document.querySelector("#dynamicLink");
// 条件によって開き方を変える
if (user.isPremium) {
link.target = "_blank";
link.rel = "noopener";
} else {
link.target = "_self";
}
「プレミアムユーザーは新しいタブで開く」
といった制御も可能です。
初心者として「target 属性」で絶対に掴んでほしいこと
target は
「リンクをどのタブ・ウィンドウで開くかを決める属性」 です。
_self（今のタブ）_blank（新しいタブ）
この 2 つをまず覚えれば十分。
そして、_blank を使うときは必ず rel="noopener" を付ける。
これはセキュリティ上の必須ルールです。
あなたが <a> を書くときに、
「このリンクは“どこで開く”のがユーザーにとって自然か？」
と一度考えられるようになったら、
もう target 属性を“ただのオプション”ではなく、
“ユーザー体験と安全性を設計する道具”として扱えている状態です。