Webサイトで「リンクをクリックしたら新しいタブで開かれた」という仕様をよく見かけます。
この仕様は、HTMLのaタグに設定を一つ加えるだけで実装可能です。
今回は、HTMLのaタグで、リンクを別タブで開くようにする方法を紹介していきます。
リンクを別タブで開く方法
基本的な書き方
HTMLでリンクを別タブで開くには、aタグに target="_blank" を指定します。
これだけで、リンク先が新しいタブで開くようになります。
<a href="https://nameko-online.com" target="_blank">なめこオンラインのTOPページ</a>rel属性もセットで指定する
target="_blank"を使う場合は、rel="noopener noreferrer"も一緒に指定しましょう。
これはセキュリティ対策の一つで、リンク先から元ページを操作されるリスクを防ぐためです。
実務ではセットで書く習慣をつけておくと安心です。
<a href="https://nameko-online.com" target="_blank" rel="noopener noreferrer">なめこオンラインのTOPページ</a>別タブ設定を使うべき場面
ここまで、別タブで開くようにする方法について紹介してきましたが、すべてのリンクを別タブにするというのは推奨されていません。
ユーザー体験（UX）を考えて使い分けることが重要です。
例えば、以下のようなケースで有効です。
逆に、同じドメイン内でのページ遷移の場合は、同一タブで遷移するのが一般的です。
まとめ
HTMLでリンクを別タブで開くには、target="_blank"を指定するだけで簡単に実装できます。
基本を押さえておけば実務でもすぐに活用できますので、ぜひ使いこなしていきましょう。
なめこオンラインでは、Web開発初学者向けのコンテンツを発信しています！
ぜひ、多くの方にシェアいただけますと嬉しいです！
コメント