HTML | aタグでテキストリンク、画像リンクを作成する

2022-01-292022-01-30HTML リンク,HTML

HTMLのa（アンカー）タグを使ってテキストや画像のリンクを作成する方法を紹介しています。

aタグでテキストリンクを作成する

<a>タグでテキストリンクを作成する表示サンプルとHTMLサンプルコードです。

href属性にリンク先のURLを記述します。
リンクテキストは＜a＞タグと閉じタグの間に記述。

HTML | ONE NOTES

<a href="リンク先URL">リンクテキスト</a>

別タブで開く場合はtarget属性に「_blank」を指定ます。

HTML | target=”_blank”でリンクを別タブで開く方法と脆弱性対策 | ONE NOTES

<a href="リンク先URL" target="_blank" rel="noopener">リンクテキスト</a>

aタグで画像リンクを作成する

<a>タグでテキストリンクを作成する表示サンプルとHTMLサンプルコードです。

<a>タグのhref属性にリンク先のURLを記述します。

<img>タグは<a>タグに囲われる形で記述し、src属性に画像のURL、title属性にツールチップ表示用のテキスト、alt属性に画像の説明文を記述します。

<a href="リンク先URL"><img src="画像URL" title="ツールチップテキスト" alt="画像の説明文"></a>

画像を使ったリンクもtarget属性に「_blank」を指定して別タブで開くようにする事が可能です。