【初心者向け】aタグを別タブで開く方法と便利なオプション解説

初めに

Webページを作成するとき、リンクをクリックしたときに「同じタブで開く」か「別のタブで開く」かを制御できるのをご存じでしょうか？
例えば、外部サイトへのリンクは別タブで開いた方がユーザーが自分のサイトに戻りやすくなります。

この記事では、aタグの基本から、別タブで開くための設定方法、そして知っておくと便利なオプションを解説していきます。

aタグの基本的な書き方

リンクを作成するときには、HTMLの<a>タグを使います。

<a href="https://example.com">リンクテキスト</a>

• href属性 … リンク先のURLを指定
• リンクテキスト … 実際にユーザーがクリックする部分

上記のように書くと、クリックしたときに 同じタブでリンク先が開く のが基本の挙動です。

👉 詳しくは MDN公式ドキュメント：a要素 も参考にしてください。

別タブで開くための書き方

別タブでリンクを開くには、target="_blank" を指定します。

<a href="https://example.com" target="_blank">別タブで開くリンク</a>

その他のオプション

aタグには他にも便利なオプションがあります。

1. rel=”noopener noreferrer”

セキュリティ上、target="_blank"を使うときには rel属性 を一緒に指定するのがおすすめです。

<a href="https://example.com" target="_blank" rel="noopener noreferrer">安全に別タブで開く</a>

• noopener … 新しいタブから元ページを操作できなくする
• noreferrer … リンク元の情報を渡さない

この指定をしておくと、セキュリティリスクを避けられるため実務でもよく使われます。

2. download属性

ファイルをリンクから直接ダウンロードさせたいときに使います。

<a href="sample.pdf" download>PDFをダウンロード</a>

クリックすると、新しいタブで開かずに ダウンロードが開始 されます。

さいごに

この記事では、aタグを使ったリンクの基本から、別タブで開くための方法、さらに便利なオプションについて紹介しました。

• 基本：<a href="URL">リンク</a>
• 別タブで開く：target="_blank"
• セキュリティ対策：rel="noopener noreferrer"
• 便利な使い方：download属性 など

特に外部サイトへのリンクでは target="_blank" と rel="noopener noreferrer" をセットで使うのがベストプラクティスです。

ぜひ、自分のWebサイトでも試してみてください！