スキルアップを始める!

HTMLの target 属性における “_blank” と “blank” の違いについて

HTML(エイチティーエムエル)
HTML(エイチティーエムエル)
この記事は約3分で読めます。

※記事中に広告情報を含みます。

スキルを手に入れた時、人は強くなれる。
Youtubeでスキルアップを始める 電子書籍でスキルアップを始める
\ワードプレスのスキルアップはこちら!/ WordPress入門読本


HTMLの target 属性における "_blank""blank" の具体的な違いは、主にブラウザがリンクの目的地をどのように扱うかに基づいています。

target="_blank"

target="_blank"は、HTMLのリンク(<a>)のtarget属性に指定する値で、以下のような動作をします。

<a href="https://www.example.com" target="_blank">リンク</a>
  • 用途: この属性値は、リンクをクリックした際に新しいブラウザのタブまたはウィンドウでURLを開くために使用します。これはユーザーが現在のページを離れることなく、追加の情報源を参照できるようにするためによく用いられます。
  • 挙動: ユーザーがリンクをクリックすると、ブラウザは完全に新しい、独立したタブまたはウィンドウを作成します。このタブは他のタブとは独立しており、開かれたサイトによってはセキュリティ上の問題(たとえば、rel="noopener" の使用を忘れた場合のウィンドウオブジェクトへのアクセス)を引き起こすことがあります。

target="blank"

target="blank"の動作は以下のようになります。

<a href="https://www.example.com" target="blank">リンク</a>
  • 用途: これは技術的には特定の挙動を示す標準の値ではありませんが、特定のブラウザや状況下で "blank" という名前のウィンドウを開くために使用されることがあります。これは通常、独自のブラウザ拡張機能や特定のアプリケーションでのみ機能します。
  • 挙動: リンクがクリックされると、"blank" という名前のウィンドウがあればそのウィンドウにURLが開かれ、なければ新しいウィンドウが作成される可能性があります。しかし、これは標準的な挙動ではなく、ブラウザや設定によって異なるため、予測不可能な結果を招くことがあります。

違いのポイント

  • "_blank"は確実に新しい別々の空間(プロセス)を作る
  • "blank"は新しい空間を作るかどうかが保証されていない

つまり、"_blank"を使えば、リンク先のページが現在のページの影響を受けずに独立して動作することが保証されます。

セキュリティ面での違い

  • "_blank"を使えば、リンク先のページが現在のページの重要なデータにアクセスしづらくなる
  • "blank"の場合、同じプロセスで動作する可能性があるので、そのリスクが高くなる

セキュリティ的にも、"_blank"を使う方が安全です。

まとめ

別ドメインでページを開く場合においては、target="_blank" を使用して新しいタブでリンクを開くことが推奨されます。これにより、ユーザー体験が向上し、予期せぬ動作を防ぐことができます。一方で、"blank" は特殊なケースを除いては推奨されない値です。セキュリティを考慮すれば、基本的には”_blank”を使うのが無難でしょう。

URLをコピーしました!