【cording】HTMLのリンクを開くのは？同じタブ？新しいタブ？それとも？（target属性）

閲覧ありがとうございます。

そんな問題解決につながれば嬉しいです。

\ このサイトで利用しています /

おすすめテーマ

おすすめサーバー

リンクは別タブで開く方が閲覧しやすい

複数のページを閲覧するとき、別のタブで開いておくことで行ったり来たりがしやすく便利ですよね。

同じタブで開くと再度ページを開きなおさなければならず手間になります。

今回は「target属性」を使ってリンクをどのように開くかを指定する方法を残しておきます。

target属性の値とその挙動

<a href="https://web.ki-biz.com/weblog/">当サイトへのリンク</a>

このコードを表示すると以下になります。

このリンクをクリックすると今開いているタブにページが表示されます。これをベースに比較していきます。

target属性の値

target属性には４つの値があります。

以下にサンプルコードを挙げていきます。クリックすることで挙動を確認できます。

実際の挙動

_blank

<a href="https://web.ki-biz.com/weblog/" target="_blank">当サイトへのリンク</a>

_self

<a href="https://web.ki-biz.com/weblog/" target="_self">当サイトへのリンク</a>

_parent

<a href="https://web.ki-biz.com/weblog/" target="_"parent>当サイトへのリンク</a>

_top

<a href="https://web.ki-biz.com/weblog/" target="_top">当サイトへのリンク</a>

target=”_blank”の注意点と対処法

タブナビングと呼ばれるフィッシング詐欺の一種は「target=”_blank”」を利用して偽物のページにリダイレクトさせます。

これを防ぐためにrel属性を使ってページとリンク先のURLの関係を設定することができます。

トラブル防止のため、必ず設定しておきましょう。

「rel=”noopener noreferrer”」

このコードを追加すればOKです。

<a href="https://web.ki-biz.com/weblog/" target="_blank" rel="noopener noreferrer">当サイトへのリンク</a>

今回は以上になります。参考になれば嬉しいです。

こちらの記事を参考に参考にさせて頂きました。

ミツエーリンクス

target属性 | 用語集 | ミツエーリンクス HTML4/XHTML1用語である「target属性」の意味について説明します。

freeCodeCamp.org

HTML のリンクを新しいタブで開くようにする方法 タブって便利ですよね。タブのおかげで、マルチタスクでたくさんのオンラインの作業を同時に行うことができます。 現在ではタブは一般的になり、リンクをクリックした際、…