Apr. 8th,2015
要素について
| カテゴリー | フロー・コンテンツ、フレージング・コンテンツ、パルパブル・コンテンツ |
| “href”属性を指定した場合、インタラクティブ・コンテンツ | |
| 利用場所 | フレージング・コンテンツが置ける場所 |
| 内容 | トランスペアレント・コンテンツ・モデル(ただし、インタラクティブ・コンテンツや“a”要素を内容に含むことはできません) |
| タグの省略 | 不可 |
“a”要素は“href”属性を指定した場合ハイパーリンクを表します。
“href”属性を指定しない場合プレースホルダーを表します。まだリンク先がまだ存在しない、もしくは存在したが削除された場合などにダミーリンクとすることができます。
サンプルコード
<p><a href="sample.html">リンク</a></p>
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| なし | |||
| 任意属性 | |||
| グローバル属性 | |||
| href="" | リンク先の指定 | URL | リンク先のURL |
| #ID名 | リンクの到達点となる要素の“id”属性の値 | ||
| mailto:メールアドレス | メールの送信先 | ||
| tel:電話番号 | 発信する電話番号 | ||
| target="" | リンク先の表示方法 | _blank | 新しいブラウジング・コンテキストに表示 |
| _self | 現在のブラウジング・コンテキストに表示 | ||
| _parent | 現在のブラウジング・コンテキストの1つ上位のブラウジング・コンテキストに表示 | ||
| _top | 現在のブラウジング・コンテキストの最上位のブラウジング・コンテキストに表示 | ||
| ブラウジング・コンテキスト名 | 任意のブラウジング・コンテキストに表示 | ||
download="" |
ダウンロードさせるかどうか、ダウンロード時のファイル名 | ファイル名 | ダウンロード時のファイル名 |
ping="" |
pingの送信先 | URL | pingの送信先 |
| rel="" | 現在の文書から見たリンク先との関係 | リンクタイプ | 現在の文書から見たリンク先との関係 |
| hreflang="" | リンク先の記述言語 | 言語コード | リンク先が記述されている言語 |
| type="" | リンク先のMIMEタイプ | MIMEタイプ | リンク先のMIMEタイプ |
referrerpolicy="" |
リファラーポリシーを指定 | リファラーポリシー | リファラーポリシー |
“href”属性を指定しない場合は“target”属性、“download”属性、“ping”属性、“rel”属性、“hreflang”属性、“type”属性、“referrerpolicy”属性は指定できません。
過去に定義されていた属性
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
name="" |
到達点として指定するための名前 | 文字列 | 固有の識別名 |
| charset="" |
リンク先の文字エンコーディング | 文字エンコーディング | リンク先の文字エンコーディング |
| rev="" |
リンク先から見た現在の文書との関係 | リンクタイプ | リンク先から見た現在の文書との関係 |
| accesskey="" | 要素にアクセスキーを割り当てる | 文字 | ユニコード1文字によるアクセスキー |
| shape="" |
イメージマップの領域の形状 | rect | 長方形 |
| circle | 円形 | ||
| poly | 多角形 | ||
| default | 画像全体 | ||
| coords="" |
イメージマップの領域の座標 | 左上の角のX座標,左上の角のY座標,右下の角のX座標,右下の角のY座標 | 【“shape”属性の値が“rect”の場合】左上の角の座標と右下の角の座標 |
| 中心点のX座標,中心点のY座標,半径 | 【“shape”属性の値が“circle”の場合】中心点の座標と半径 | ||
| X座標,Y座標,X座標,Y座標,... | 【“shape”属性の値が“poly”の場合】すべての角の座標を順番に | ||
| tabindex="" | フォーカスの可否とフォーカスの移動順序を指定する | 正の整数 | 順次ナビゲーションに加わり、フォーカスの順番を指定(“tabindex”属性の値が小さい順番にフォーカスする) |
| 0 | 順次ナビゲーションに加わるがフォーカスの順番は指定しない(文書内に記述された順番でフォーカスする) | ||
| 負の整数 | フォーカス可能だが順次ナビゲーションには加わらない | ||
| onfocus="" | フォーカスされた時に実行されるスクリプト | スクリプト | フォーカスされた時に実行されるスクリプト |
| onblur="" | フォーカスを失った時に実行されるスクリプト | スクリプト | フォーカスを失った時に実行されるスクリプト |
プレースホルダーとしての“a”要素
“href”属性を指定していない“a”要素はプレースホルダー(場所取り)を表します。リンク先が準備中である場合など今後リンクを指定する可能性がある、あるいはリンク先が削除された場合に使用できます。
プレースホルダーとして使用する(“href”属性を指定しない)場合は“target”属性、“download”属性、“ping”属性、“rel”属性、“hreflang”属性、“type”属性、“referrerpolicy”属性は指定できません。
<p><a>リンク</a></p>
“a”要素の内容
“a”要素の内容となるテキストは“リンクテキスト”や“アンカーテキスト”と呼ばれますが、これらはリンク先の内容を表すものであるべきです。音声ブラウザなどでリンクテキストだけを抽出して一覧にする機能で使用されることがあるほか、すべてのユーザーにとってリンク先がリンクテキストによって一目でわかることは求めている情報へ到達するための手助けになります。そのため、リンクテキストがリンク先を適切に表すことはアクセシビリティの点から重要となります。
不適切なアンカーテキスト
<p>マンゴスチンについて詳しくは<a href="sample.html">こちら</a>をご覧ください。</p>
適切なアンカーテキスト
<p>詳しくは<a href="sample.html">マンゴスチンについての情報</a>をご覧ください。</p>
適切なリンクテキストの指定はSEOの観点からも非常に重要とされます。検索エンジンはリンクの数や質をウェブページの評価に利用していて、どのようなリンクテキストでリンクされているのかがウェブページの内容を判断する材料になります。リンクテキストに含まれるキーワードはリンク先のウェブページの重要なテーマであると認識されやすく、そのキーワードでの検索順位を向上させる場合があります。
“a”要素の内容はテキストである必要はなく、“img”要素などテキスト以外を配置してリンクとすることもできます。この場合“alt”属性の値がリンクテキストの代わりとして扱われます。
<p><a href="https://web.havincoffee.com/"><img src="sample.png" alt="HTMLタグ辞書～havin'a coffee break"></a></p>
また、HTML4までは“a”要素は“インライン要素”だったので“ブロックレベル要素”をその中に配置することはできませんでした。しかし、HTML5ではトランスペアレント・コンテンツ・モデルとなったので、“a”要素の親要素に内包できるコンテンツ・カテゴリーの要素であればブロック・レベルの要素(CSSで“display: block;”)でも“a”要素の中に配置できます。
<a href="sample.html">
<h1>バナナの特徴</h1>
<p>「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。</p>
</a>
バナナの特徴
「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。
仕様書
“a”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
定義されている仕様書
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
| <a> |   |
|
|
|
|
|
|
|
|
|
|
|---|---|---|---|---|---|
| href="" | |
|
|
|
|
| target="" | |
|
|
|
|
| download="" |   |
|
|
|
|
| ping="" | |
|
|
|
|
| rel="" | |
|
|
|
|
| hreflang="" | |
|
|
|
|
| type="" | |
|
|
|
|
| referrerpolicy="" | |
|
|
|
|
