【HTML】aタグとは?アンカー要素でリンクを使いこなす

launcher-kit-what-is-the-html-a-tagan-use-by-way-of-use-or-scene-htmla

HTMLのaタグはウェブの真髄たる「ハイパーリンク(以下、リンク)」を作るためのタグです。

タグの評価
使用頻度
 (5)
重要度
 (5)
総評

aタグは使用頻度、重要度ともに最高レベルです。
ほぼすべてのHTMLドキュメントに1個以上は使用されます。

基礎知識

ウェブはドキュメント同士をリンクで相互に繋げて大きな情報網を作るために生まれました。
その中心となる役割を担っているのがハイパーリンクを作るaタグです。

あらゆるものへリンクを作る

aタグはページやサイト内にリンク設置することが出来ます。
リンク先として指定できるものには下記があります。

  • 自サイト内のページ(内部リンク)
  • 自サイト外のページ(外部リンク)
  • 同一ページ内の特定の場所(ページ内リンク)
  • ファイル
  • 電話番号
  • メールアドレス

aタグは出現頻度が高く、ウェブ上にあるページはほぼ全てがaタグを介して何らかのページへのリンクを持っています。
もしあなたが開発者の場合は必ずaタグを使う場面があるでしょう。

構造

<!-- 基本的なaタグの構造 -->
<a href="リンク先のURLやパス">リンクテキスト</a>

LauncherKitのトップページへリンクするサンプルコード

<!-- LancherKitのトップページへのリンク -->
<a href="https://launcher-kit.com">LauncherKit</a>

属性

固有の属性

aタグ固有で優先的に覚えるべき属性一覧

属性名使い方
hrefURIリンク先のプロトコル・パス・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の入れ子構造が正常に認識できなくなり、ドキュメントの構造が崩れるなどの問題が発生します。