こんにちは、takaです。
aタグで新規タブとして開くように設定したいことありますよね。
初心者のうちは情報量が多いので、忘れてしまいがちです。
この記事では別タグで開く方法と、その使い所について解説していきます。
設定の仕方
別タブで開くには、aタグのtarget属性を利用します。
- 同じタブで開く target=”_self”
※デフォルトが「_self」です。普通省略します。 - 別タブで開く target=”_blank”
コードで書くとこんな感じ
<div>
T-fileへのリンクは<a href="https://t-file.blog/" target="_self">こちら（同じタブ）</a>
T-fileへのリンクは<a href="https://t-file.blog/"target="_blank">こちら（別タブ）</a>
</div>出力結果
T-fileへのリンクはこちら（同じタブ）
T-fileへのリンクはこちら（別タブ）
本当に使うタイミング合っていますか？
自分のブログから自分のブログに遷移するときは別タブで開かないようにしましょう。
ブラウザの戻るボタンで戻れなくなり操作性が悪くなるという理由はあります。
WEBアクセシビリティという言葉を聞いたことはありますか？
視覚障害者のかたがwebサイトを利用する際、「tab」キーを利用しサイト内のaタグやbuttonタグを遷移していきます。
そして、「tab」キーを利用し目当てのaタグに来た際に「Enter」キーを押しページ遷移するのですが、その際に新規タブで開いたか既存のタブで開いたかを認識できません。
既存のタブで開いたと思っているが、不必要な箇所で新規タブで開いている場合戻れなくなってしまいます。
どの場合に利用すると良いか？
外部サイトにリンクする際に別タブで開かないようにしている場合、せっかく自分のサイトに来てくれたユーザーが自分のサイトを見失います。
なので、外部サイトにリンクを飛ばす際は別タブで開きましょう。