【HTMLタグ】aタグでリンクや画像リンクを作成する方法の解説

このページについて

このページではHTMLタグのaタグを使って、リンクを定義する方法の解説をしています。

aタグは「あるページから別のページにリンクするために使用するハイパーリンク」を定義するタグです。ハイパーリンクとはインターネットにおいて文書同士を繋ぐ事を意味します。

aタグの基本的な書き方は以下の通りです。

<a href="リンク先のURL">リンク先の名前</a>

通常、aタグのみで使うという事はありません。aタグで使う事ができる属性をいくつか組み合わせてリンクを定義する事になります。

aタグはテキストの下に線が引かれます。あとはスタイルシートにもよりますが、テキストが青色になっていたりクリック済だと紫になったりと、それぞれの環境によりますが色が変化します。

aタグで使える属性は以下の通りです。

download	ユーザーがハイパーリンクをクリックした時に、リンク先のファイルのダウンロードを開始させる
href	リンク先のURL
hreflang	リンク先の言語を指定
media	リンクされたドキュメントが最適化されているメディア/デバイスを指定します。
ping	リンクをたどると、本文pingを含む投稿リクエストがブラウザから(バックグラウンドで)送信されるURLのスペースで区切られたリストを指定します。通常、追跡に使用されます。
referrerpollcy	リンクとともに送信するリファラー情報を指定します。
rel	現在の文書とリンクされた文書の関係を指定します。
target	リンクされたドキュメントを開く場所を指定
type	リンクされたドキュメントのメディアタイプを指定します。

他、グローバル属性とイベント属性をサポートしています。

aタグの最も多い使い方。最もシンプルにリンク先のURLのみを使う場合はこのように書きます。

<a href="リンク先URL">リンク先の名前</a>

aタグで画像をリンク元に使う方法。画像が表示され、その画像をクリックすると目的のリンク先に行くという仕組みになります。

<a href="リンク先URL">
<img src="画像のURL" width="画像の横サイズ" height="画像の縦サイズ" alt="画像の代替えテキスト"></a>

aタグのリンク先を開く方法2種類。ウィンドウで開くかタブで開くかはブラウザの設定により異なります。

<a href="リンク先URL" target="_blank">リンク先名</a> //リンク先を新規ウィンドウor新規タブで開く
<a href="リンク先URL" target="_self">リンク先名</a> //リンク先をクリックしたウィンドウで開く(デフォルト)

それぞれ基本的な使い方から少し手を加えた程度になりますが、こんな感じで扱う事ができます。

aタグはシンプルにURLを貼ってリンクとすることも出来ますが、そのリンク先の種類や関係などを設定することも出来ます。それぞれ使いたいものを使っていきましょう。