【勉強メモ】HTML aタグ

基本

1. aタグはリンクを指定するHTMLタグ。

2. 「a」は船のいかりを意味する「Anchor（アンカー）」の頭文字が由来。

3. 記述　→　<a href="（リンク先のURL）">テキストサンプル</a>

4. アンカーテキストとは、aタグで囲ったテキスト部分のこと

使い方

1. 同じタブのリンク先ページへ飛ぶ

<a href="（リンク先のURL）">アンカーテキスト</a>

2. 別タブのリンク先ページへ飛ぶ

<a href="（リンク先のURL）" target="_blank" rel="noopener">アンカーテキスト</a>

「target="_blank"」を使う際の注意点は、
「rel="noopener"」または「rel="noreferrer"」をセットで付けることです。

https://www.seohacks.net/blog/985/

target属性

a要素のtarget属性は、リンク先ドキュメントの開き方を指定する属性。
target属性は、a要素にhref属性がある場合だけ使用する。
a要素にhref属性がない場合、target属性は、省略しなければならない。

http://html5.cyberlab.info/elements/text/a-target.html#:~:text=%E8%A6%81%E7%82%B9-,a%E8%A6%81%E7%B4%A0%E3%81%AEtarget%E5%B1%9E%E6%80%A7%E3%81%AF%E3%80%81%E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AE,%E7%9C%81%E7%95%A5%E3%81%97%E3%81%AA%E3%81%91%E3%82%8C%E3%81%B0%E3%81%AA%E3%82%89%E3%81%AA%E3%81%84%E3%80%82

<a href="URL" target="開き方">リンクテキスト</a>

target属性値
_blank
新規ウィンドウに開く。
_self
現在のウィンドウ、現在のフレームに開く。
_parent
親ウィンドウ、親フレームに開く。
_top
ウィンドウ全体に開く。フレームは解除する。
ウィンドウ名
指定したウィンドウ名のウィンドウに開く。
フレーム名
指定したフレーム名のフレームに開く。

http://html5.cyberlab.info/elements/text/a-target.html#:~:text=%E8%A6%81%E7%82%B9-,a%E8%A6%81%E7%B4%A0%E3%81%AEtarget%E5%B1%9E%E6%80%A7%E3%81%AF%E3%80%81%E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AE,%E7%9C%81%E7%95%A5%E3%81%97%E3%81%AA%E3%81%91%E3%82%8C%E3%81%B0%E3%81%AA%E3%82%89%E3%81%AA%E3%81%84%E3%80%82

rel=”noopener”

noopenerには以下の2つの役割があります。

target="_blank"の脆弱性対策
target="_blank"を使って新しいリンクを開いた場合、新しいタブからwindow.openerというオブジェクトを用いてリンク元の操作ができてしまいます。リンク先のサイトが悪意のあるサイトや、ハッキングされているサイトだった場合に、リンク先から自分の見ていたリンク元ページにアクセス・操作される可能性があります。また、フィッシング詐欺に利用されるリスクもあるのです。
openerを否定するnoをつけたnoopenerを使うことで、元ページは操作されません。これにより、サイトのページを不正に改ざんされるのを防ぐことが可能です。

ページパフォーマンスの低下を回避する
target=”_blank”で開かれたページと元リンクのページでは、同じJavaScriptが使われています。したがって、開かれたリンク先の動作が重いと、元ページの動作も重くなる可能性があるようです。rel="noopener"を設定することで、リンク先で負荷の大きいJavaScript処理が行われても、リンク元ページが影響を受けることを防げます。

※Internet Explorerなど一部の古いブラウザでは対応していない場合があります。

https://myajo.net/tips/10672/

rel=”noreferrer”

参照先に参照元リンクを渡さないようにする
rel="noreferrer"を使うことで、参照先に対して参照元のリンクを渡さないようにすることが可能です。アフィリエイトで主に影響が見られ、参照元が正しく追跡できないので、どのページから成果報酬が発生したかが分からなくなります。トラッキングへの影響はないため売上は発生しますが、売上の発生源が不明になるため、アフィリエイトには向かないリンクといえるでしょう。

古いブラウザへの対応
noopenerは古いブラウザへ対応していない場合があると説明しましたが、noreferrerは対応ブラウザが広いため、noopenerのカバーが可能です。noopenerと同様の効果をもつため、アフィリエイトサイト以外では使用感に問題はありません。

https://myajo.net/tips/10672/

noopenerとnoreferrerを併用する必要性なし

現在では、noopenerはほとんどのブラウザで対応しているため、rel="noreferrer"を設定しなくても問題はありません。
Internet Explorerのように、すでにサポートが終了したブラウザに対応させたい場合には、noreferrerも設定すると良いでしょう。ただし、noreferrerはアフィリエイトサイトには向かない面があるので、必要なければnoreferrerはつけない方が無難です。

https://myajo.net/tips/10672/

3. 画像にリンクを張る

<a href="（リンク先のURL）"><img src="（画像の保存場所）" alt="（画像の説明）"/></a>

imgタグを<a>タグで囲う。

4. 同じページ内の別箇所へ飛ぶ

<a href="#（任意の単語）">テキスト</a>
span id="（任意の単語）">テキスト</span>

「id名」を設定し、＃id名で設定したところまで飛ぶ。

絶対パスと相対パス：
1）URLを省略しない　絶対パス
<a href="https://www.seohacks.net/blog/1066/">アンカーテキスト</a>

2）URLを省略する　相対パス←これでもOK！
<a href="blog/1066/">アンカーテキスト</a>
※外部サイトへのリンクを張る際には必ず「絶対パス」

使用注意！！

もしaタグに余白がつかない！！ってなったら、インラインブロックに変えたらできる！！

出典：https://www.seohacks.net/blog/985/

出典：http://html5.cyberlab.info/elements/text/a-target.html#:~:text=%E8%A6%81%E7%82%B9-,a%E8%A6%81%E7%B4%A0%E3%81%AEtarget%E5%B1%9E%E6%80%A7%E3%81%AF%E3%80%81%E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AE,%E7%9C%81%E7%95%A5%E3%81%97%E3%81%AA%E3%81%91%E3%82%8C%E3%81%B0%E3%81%AA%E3%82%89%E3%81%AA%E3%81%84%E3%80%82

出典：https://myajo.net/tips/10672/