a要素 - ハイパーリンク

　a要素（anchorの略）に href属性が指定されていれば、ハイパーリンクを表します。href属性には、ハイパーリンクの宛先となる URL を指定します。

　ハイパーリンクとは、部分テキストや要素に他のページなどへの参照関係をもたせること。参照とは、対象をクリック（またはタップあるいキーボードによりアクティブ化するなど）でリンク先へ閲覧対象を遷移する機能。この参照関係をハイパーリンクあるいは単にリンクと呼ぶ。ハイパーリンクで参照関係を作ることをリンクを張るという。Microsoft Edge や Google Chrome など主要なウェブブラウザではリンクを張ったテキストは青い文字にアンダーラインをつけて表示される。この表現は、スタイルシートで変更できる。

href属性のマークアップ例


<a href="https://www.yugien.xyz/">Yugien</a>

　a要素はインラインだけではなくブロック全体をハイパーリンクとすることも可能です。

ブロックをハイパーリンクにするマークアップ例


<aside>
	<h2>広告</h2>
	<a href="http://ad1.example.jp/">
		<section>
			<h3>メタボーリング2</h3>
			<p>メタボが気になるあなた。自宅で簡単にメタボ対策エクササイズ！</p>
			<p>玉の重さが従来の1.2倍になりパワーアップ！</p>
		</section>
	</a>
	<a href="http://ad2.example.jp/">
		<section>
			<h3>ダイエット10分クッキング</h3>
			<p>ダイエットは食事から。</p>
			<p>ダイエット効果抜群のレシピ厳選！</p>
		</section>
	</a>
</aside>

　HTML4では、インライン要素である a要素の中に、ブロック要素である div要素を入れる事はできませんでした。しかし、HTML5では、a要素のコンテンツ・モデルがトランスペアレントとして規定されています。そのため、その親要素のコンテンツ・モデルで許されるのであれば、a要素の中に、HTML4ではブロック要素として規定されていたような要素を入れる事が可能となります。

　ただし、親要素のコンテンツ・モデルが許すコンテンツとは言え、a要素にインタラクティブ・コンテンツに属する要素を入れてはいけません。a, button, iframe, select, textarea要素などです。

　a要素に href属性を指定した場合は、target, ping, rel, media, hreflang, type属性を利用して、そのハイパーリンクの宛先の性質を表す事が出来ます。

target属性

　この属性は、ハイパーリンクをたどった時に、それをどのブラウジング・コンテキストに表示させるかを指示します。この属性の値には、ブラウジング・コンテキスト名、またはキーワードを指定しますが、そのキーワードについてはいくつか規定されています。

target属性のマークアップ例


<a href="https://www.yugien.xyz" target="_blank">Yugien</a>

ping属性

　この属性は、ユーザーが該当のハイパーリンクをたどった時に、ping と呼ばれる通知を指定の URL に送信します。この属性には、その ping を受け取るための URL のリストをスペース区切りで複数指定する事が出来ます。

ping属性のマークアップ例


<a href="/index.html" ping="/cgi-bin/ping.cgi /cgi-bin/track.cgi">Yugien</a>

　これまで、ユーザーがどのリンクをクリックしたかを計測するためには、計測用の CGIなどを用意して、その CGIの URLを a要素の href属性にセットするしかありませんでした。そして、その CGIでは、何かしらの記録を行った後、本来のリンク先へリダイレクトする方式を採用してきました。

　しかし、セマンティクス上、計測用の CGIの URLを href属性にセットするのは、正しくありません。また、ユーザーは、ハイパーリンクをクリックしない限り、その本来のリンク先の URLを知ることができません。

　さらに、この方式は、ユーザーに対して、クリックした事を記録しないという選択肢を与える事ができません。クリックした以上、href属性にセットされた CGIをキックする事になります（サイト運営者側としては、この方が望ましいのかもしれませんが）。

　こうした問題に対処するため、HTML5では、クリック計測のために使う事が出来る ping属性を新たに設けました。HTML5仕様では、ブラウザに対して、ping通知対象のハイパーリンクである事がユーザーに分かるようにし、ユーザーが ping通知を許可するかどうかを選択できるようにする事を推奨しています。また、Web制作者に対しても、クリック計測には ping属性を使う事を推奨しています。

　旧来のリダイレクト方式では、計測用の CGIの処理が完了するまでページが表示されませんでした。しかし、ping属性による ping通知は、href属性に指定された URLへナビゲートするのと並行して行われます。そのため、ユーザーにとっても使いやすいサイトになります。

　なお、実際に ping属性がセットされたハイパーリンクをクリックすると、ping属性に指定された URL に対して、POSTメソッドによるリクエストが、ブラウザから送信されることになります。

　ping通知のリクエスト・ヘッダーには、Ping-From、Ping-To、そして Refererというヘッダーが加えられます。Ping-Fromはハイパーリンクを含んだ該当のページが最初に表示された時の URLを表します。Ping-Toはハイパーリンクの宛先の URLを表します。Refererは、ハイパーリンクを含んでいる該当のドキュメントのその時点の URLです。通常は Ping-Fromと同じ URLになるのですが、例えばユーザーがページ内アンカーをクリックして、同じページ内で表示位置を移動した場合、ページの URLにフラグメント識別子（#で始まる識別子）が加わります。この状態で ping属性がセットされたハイパーリンクをたどると、Refererにフラグメント識別子を含んだ URLがセットされることになります。HTTPヘッダーにセットされる URLは、いずれも http:// から始まる絶対 URLとなります。

　ただし、常にすべてのヘッダー情報がサーバーに送信されるわけではありません。該当のドキュメントが SSLかどうか、また、該当のドキュメントと ping先が同一オリジン（例えば http://www.html5.jp:80 までが同じ）かどうかによって、どの HTTPリクエスト・ヘッダーが付与されるかどうかが変わってきます。

rel属性

　rel属性は、ハイパーリンクを含んだドキュメントと、ハイパーリンクの宛先との関係性を表します。詳細は別ページにて紹介予定です。ここでは、代表的な利用例を１つご紹介しましょう。

rel属性のマークアップ例①


<article>
	<h1><a href="/blog/my_cat/" rel="bookmark">私が飼っている猫</a></h1>
	　：
</article>

　このサンプルでは、ブログ記事のタイトルを a要素を使ってハイパーリンクとしています。この a要素に rel="bookmark" を加える事で、それが該当の記事のパーマリンクである事を表す事が出来ます。

rel属性のマークアップ例②


<article>
	<header>
		<h1>私が飼っている猫</h1>
		<p><a href="/blog/my_cat/" rel="bookmark" title="私が飼っている猫">パーマリンク</a></p>
	</header>
	...
</article>

　このサンプルは、明示的に「パーマリンク」とブラウザ上に表示させたい場合のマークアップ例です。この場合は、title属性を使って、記事のタイトルを明記しておくのが良いでしょう。

hreflang属性

　hreflang属性は、ハイパーリンク先のコンテンツの言語を表します。例えば、あるページが日本語だけでなく英語やフランス語で書かれたページも用意されているなら、次のようにマークアップします。

hreflang属性のマークアップ例


<a href="alternate" href="/en/index.html" hreflang="en" title="my cat" />English</a>
<a href="alternate" href="/fr/index.html" hreflang="fr" title="mon chat" />FranCais</a>
<a href="alternate" href="/ja/index.html" hreflang="ja" title="私の猫" />日本語</a>

　hreflang属性に指定するコードは、IETF BCP47 "Matching of Language Tags" に従わなければいけません。

　フランス語であれば "fr"、ドイツ語なら "de"、日本語なら "ja" となります。また国を指定した言語の場合、例えば米国英語であれば "en-US" となります。これまで使われてきた言語コードと同じですので安心してください。

type属性

　type属性は、ハイパーリンク先のコンテンツの MIMEタイプを表します。

type属性のマークアップ例


<a href="cat.png" type="image/png">私の猫の写真</a>

　ただし、ブラウザは、a要素の type属性を使って処理方法を決定するわけではありません。基本的に、ブラウザは、HTTPレスポンス・ヘッダーの Content-Typeにセットされた MIMEタイプを採用します。type属性の値は、参考情報という程度の意味しかありません。

　そのため、無理にマークアップする必要はないでしょう。

プレースホルダー

　旧来の HTMLでは、ページ内アンカーとして a要素を使ってきました。そして、name属性や id属性でアンカー名を指定してきました。

旧来のページ内アンカーのマークアップ例


<h1><a id="chapter1" name="chapter1">HTML5</a></h1>

しかし、HTML5では、ページ内アンカーに a要素を使いません。

HTML5でのページ内アンカーのマークアップ例


<h1 id="chapter1">HTML5</h1>

　このように、id属性にアンカー名を指定すれば済みます。また、これで、どのブラウザでもページ内アンカーとして機能します。

　HTML5では、href属性がない a要素は、プレースホルダー・リンクを表します。マークアップの段階では href属性がないけれども、例えば、JavaScriptなどを使って動的にリンク先をセットするためなどに使われるものとして、href属性がない a要素を仕様上で許しています。

プレースホルダー・リンクの例


<a id="placeholder">IE専用ページへ</a>
<script>
	if(document.uniqueID) {
		document.getElementById("placeholder").href = "ie.html";
	}
</script>

　このサンプルでは、Internet Explorerからアクセスがあった場合のみ、a要素がハイパーリンクになります。Internet Explorer以外のブラウザからアクセスがあった場合は、ハイパーリンクにならず、ただのテキストとして表示されます。こうする事で、マークアップ上、それがリンクを想定して用意されたコンテンツである事がはっきりします。

　先ほどのサンプルでは、ある特定の状況でだけ href属性に URLをセットしましたが、その逆も想定されます。つまり、通常はリンク先がマークアップされるけれども、ある状況でだけリンク先が取り除かれる場合です。これは、ナビゲーションによく使われます。

ナビゲーションにおけるプレースホルダー・リンクの例


<nav>
	<ul>
		<li><a href="chapter1.html">第1章</a></li>
		<li><a href="chapter2.html">第2章</a></li>
		<li><a>第3章</a></li>
		<li><a href="chapter4.html">第4章</a></li>
	</ul>
</nav>

　これは、現在のページが「第3章」の場合のナビゲーションのマークアップ例です。このページは既に第3章のページですから、ハイパーリンクである必要はありませんし、この方が、ユーザーにとっても、今見ているのが第3章だという事がわかります。

a 要素の概要