HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでリンク先の開き方を指定する方法｜target属性の使い方と値の一覧

target属性とは

HTMLでは、<a>タグにtarget属性を指定することで、リンク先のドキュメントをどこで開くかを制御できます。外部サイトへのリンクを新しいタブで開きたい場合や、フレーム構成に応じて表示場所を切り替えたい場合などに活用できる重要な属性です。

target属性に指定できる値

target属性には、主に以下の4つの値を指定できます。

値説明
_blankリンク先のページを新しいタブで開きます。
_selfリンク先のページを現在のタブ（同じフレーム）で開きます。target属性を省略した場合の既定値です。
_parentリンク先のページを親フレームで開きます。
_topリンク先のページを最上位のフレームで開きます。フレーム構成を解除してページ全体に表示されます。

target属性の使用例

以下のコードでは、target属性に「_blank」を指定しているため、リンクをクリックすると新しいタブでページが開きます。

<!DOCTYPE html>
<html>
<head>
  <title>HTML target属性の例</title>
</head>
<body>
  <h2>参考サイト</h2>
  <p>
    次の<a href="https://www.qries.com/questions.php" target="_blank">ウェブサイト</a>を参照してください。<br>
    このリンクは新しいタブで開きます。
  </p>
</body>
</html>

まとめ

target属性を使いこなすことで、ユーザーが元のページを離れずに外部リンクを確認できるなど、より快適なナビゲーション体験を提供できます。特に外部サイトへのリンクには「_blank」を指定するのが一般的です。用途に応じて適切な値を選び、使いやすいリンク設計を心がけましょう。

  1. HTMLのaタグtarget属性とは？使い方と各値の意味を徹底解説

    HTMLのaタグ「target属性」とは <a>要素のtarget属性は、リンク先のドキュメントをどこに開くかを指定するための属性です。新しいウィンドウやタブで開く、同じフレーム内で開く、親フレームで開くなど、リンクの表示方法を柔軟に制御できます。 基本構文 <a target="_blank|_self|_parent|_top|frame"> target属性に指定できる値 target属性には、主に以下の5つの値を指定できます。 _blank：リンク先のドキュメントを新しいウィンドウ、または新しいタブで開きます。 _self：クリックされ

  2. HTMLのopen属性とは？details要素の使い方とサンプルコード解説

    HTMLのopen属性は、details要素の内容をHTMLドキュメント上で最初から表示状態（開いた状態）にするためのブール属性です。この属性を指定すると、ユーザーがsummary要素をクリックしなくても、ページ読み込み時にdetails要素内のコンテンツが展開された状態で表示されます。 構文 open属性の基本的な構文は以下のとおりです。 <details open></details> open属性はブール属性のため、値を指定せずに属性名だけで記述できます。属性を省略した場合、details要素は初期状態で閉じられ、ユーザーがsummary要素をクリックしたときに初