HTMLのa
タグはウェブの真髄たる「ハイパーリンク(以下、リンク)」を作るためのタグです。
目次
基礎知識
ウェブはドキュメント同士をリンクで相互に繋げて大きな情報網を作るために生まれました。
その中心となる役割を担っているのがハイパーリンクを作るa
タグです。
あらゆるものへリンクを作る
a
タグはページやサイト内にリンク設置することが出来ます。
リンク先として指定できるものには下記があります。
- 自サイト内のページ(内部リンク)
- 自サイト外のページ(外部リンク)
- 同一ページ内の特定の場所(ページ内リンク)
- ファイル
- 電話番号
- メールアドレス
a
タグは出現頻度が高く、ウェブ上にあるページはほぼ全てがa
タグを介して何らかのページへのリンクを持っています。
もしあなたが開発者の場合は必ずa
タグを使う場面があるでしょう。
構造
<!-- 基本的なaタグの構造 -->
<a href="リンク先のURLやパス">リンクテキスト</a>
LauncherKitのトップページへリンクするサンプルコード
<!-- LancherKitのトップページへのリンク -->
<a href="https://launcher-kit.com">LauncherKit</a>
属性
固有の属性
a
タグ固有で優先的に覚えるべき属性一覧
属性名 | 値 | 使い方 |
---|---|---|
href | URI | リンク先のプロトコル・パス・URLなどを指定する |
target | 規定文字列 | リンク先を表示する環境(コンテキスト)を指定する |
グローバル属性
a
タグも含め、全てのHTMLタグで使用可能な属性
属性名 | 値 | 使い方 |
---|---|---|
id | 任意の文字列 | HTML要素にid を指定するid は1ページにひとつ(ユニーク)でなければならない |
class | 任意の文字列 | HTML要素にclass を指定する。class は要素のグループ化などに有効的 |
応用
画像をリンクにする
a
タグは開始タグと終了タグで囲んだ子要素がリンクとなります。
子要素にはテキストだけでなく画像img
やブロックレベル要素div
などを指定することも可能です。
この仕組みを応用して「バナー画像リンク」を作成すると以下のコードになります。
<a href="[link]">
<img src="[banner]" alt="バナー画像" />
</a>
リンクを別タブで開く
a
タグのtarget
属性はリンクにどういう状況でアクセスさせるか?を制御できます。
例えば、a
タグにtarget="_blank"
を指定することでリンクを新規タブで開かせることが出来ます。
<a href="[link]" target="_blank">
<img src="[banner]" alt="バナー画像" />
</a>
電話やメールへ繋げる
a
タグはhttp(s)以外のプロトコルを指定することが出来ます。
これを利用してウェブページ以外の電話やメールへ誘導するリンクを設置することも可能です。
<!-- ウェブページへのリンク(大体はこれ) -->
<a href="https://launcher-kit.com">LauncherKit</a>
<!-- メールアドレスへのリンク -->
<a href="mailto:info@launcher-kit.com">LauncherKitへメールする</a>
<!-- 電話番号へのリンク -->
<a href="tel:000-XXXX-XXXX">電話をかける</a>
ページ内リンク
a
タグでページを横断したリンク以外によく利用するものがページ内リンクです。
同一ページ内でページ内リンクを指定することでユーザーに見て欲しいものを効果的に訴求することができます。
ページ内リンクはパスにid
属性を持ったHTML要素を指定することになります。
<!-- このリンクをクリックしたときに同一ページ内の特定の要素を見て欲しい -->
<a href="#recipe">レシピはこちら</a>
<!-- 「recipe」というidを付与した見せたい要素 -->
<div id="recipe">
レシピ
</div>
豆知識
由来
a
タグはanchorという言葉に由来します。
アンカーのイニシャルを取ってa
というタグ名になっています。
ウェブ開発業界では「a
タグはリンクを設置する」というケースが多いのでa
タグのことを「リンクタグ」と言う場面もありますが、厳密にリンクタグは<link>という別のHTMLタグを示すので覚えてよくと良いでしょう。
注意
a
タグの入れ子はできない
a
タグの中には入れることが出来ないいくつかの要素があります。
その代表的なものが同じa
タグです。
a
タグの中にa
タグを入れるとブラウザ側でHTMLの入れ子構造が正常に認識できなくなり、ドキュメントの構造が崩れるなどの問題が発生します。