仕様
A要素は、
href属性がある場合、
その内容でラベル付けされた
ハイパーリンク
（ハイパーテキストアンカー）を
表します。
| a | アンカー (anchor) |
|---|---|
| カテゴリ |
|
| 種類 | 通常要素 |
| この要素を 使用できる 状態 | フレージング |
| 許可されて いる内容 | 透過的コンテンツですが、インタラクティブコンテンツの子孫、a要素の子孫、またはtabindex属性が指定された子孫があってはなりません。 |
| 属性 | グローバル |
| text / html での タグの省略 | 省略できません。 |
| 許可されて いるARIA | button, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab, treeitem.
[既定値 : link (href 属性がある場合）] |
| DOM インター フェイス | HTMLAnchorElement |
| レンダリング | フレージングコンテンツ |
| 参加 コンテキスト | インライン |
| 確立 コンテキスト | インライン |
a要素は、アンカー(anchor) を表します。a要素にhref属性がある場合、その内容でラベル付けされたハイパーリンク（ハイパーテキストアンカー）を表します。 a要素にhref属性がない場合、要素は、要素のコンテンツのみで構成される、関連性があった場合にリンクが配置された可能性のある場所のプレースホルダーを表します。
| |
使用可能な箇所
フレージングコンテンツを
受け入れる要素に
配置できます。
a要素は、フレージング
<pre><a href="./index.htm">トップページ</a></pre>
フレージング
<button><a href="./index.htm">トップページ</a></button>
<form><button formaction="./index.htm">トップページ</button></form>
button要素は子孫にインタラクティブコンテンツを受け付けない要素です。ですので button要素のコンテンツ (内容) の子孫として a要素を配置する事ができません。
a要素と同等の事は、formaction属性でできます。form要素の action属性でも同じです。
配置できるコンテンツ
親要素に
配置できるコンテンツを
配置できます。
透過的コンテンツである a要素は、親要素がフロー
そもそも a要素はフレージング
ただし、インタラクティブコンテンツの子孫、a要素の子孫、またはtabindex属性が指定された子孫があってはなりません。
<pre><a href="./index.htm"><span>トップページ</span></a></pre>
pre要素はフレージング
<div><a href="./index.htm"><p>トップページ</p></a></div>
div要素はフロー
<a href="./index.htm"><span><button>トップページ</button></span></a>
<form><button formaction="./index.htm">トップページ</button></form>
a要素は子孫にインタラクティブコンテンツを受け付けない要素です。ですので a要素のコンテンツ (内容) の子孫として button要素を配置する事ができません。
button要素で a要素と同等の事は、formaction属性でできます。form要素の action属性でも同じです。
属性
href属性
<a href="./index.htm">トップページ</a>
href属性は、ハイパーリンクのアドレスを指定します。
<a href="#">PAGE TOP</a
属性値として "#" を使用すると、現在のページの先頭にリンクすることができます。
<a href="#APM1NEXT">SAME PAGE</a
属性値として "#APM1NEXT" を使用すると、id 属性に "APM1NEXT" を指定された要素にリンクすることができます。
<a href="./index.htm">TOP PAGE</a
属性値として "./index.htm" を使用すると、相対url として自身を基準として相対的な宛先にリンクすることができます。
"./" は同じ階層を表し、"../" は１つ上の階層を表します。
<a href="http://risyu.in.coocan.jp/">HOME PAGE</a
属性値として "http://risyu.in.coocan.jp/" を使用すると、絶対url としてその宛先にリンクすることができます。
<a href="tel:03177">電話発信</a
属性値として "tel:03177" を使用すると、端末の能力によって電話を発信することができます。
例示では 03-177 天気予報(東京)を提示しています。
target属性
<a href="./index.htm" target="_blank">新しい枠で<br>トップページ</a>
target属性は、表示する場所を指定します。ハイパーリンクナビゲーションの閲覧コンテキスト名またはキーワードでなければなりません。href属性が存在しない場合は省略する必要があります。
rel属性
<a href="./index.htm" rel="nofollow">トップページ</a>
rel属性は、リンク種別を指定します。ハイパーリンクを含むドキュメント内の場所とリンク先リソースの関係を表します。属性の値は、スペースで区切られた一意のトークンの順不同のセットである必要があります。href属性が存在しない場合は省略する必要があります。
type属性
<a href="./index.htm" type="text/html">トップページ</a>
type属性は、参照されるリソースの MIME タイプの形式を指定します。href属性が存在しない場合は省略する必要があります。
hreflang属性
<a href="./index.htm" hreflang="ja">トップページ</a>
hreflang属性は、リンクされたリソースの言語を指定します。href属性が存在しない場合は省略する必要があります。
referrerpolicy属性
<a href="./index.htm" referrerpolicy="no-referrer-when-downgrade">トップページ</a>
referrerpolicy属性は、リンクをたどるときにどれだけのリファラーを送信するかを指定します。href属性が存在しない場合は省略する必要があります。
ping属性
<a href="./index.htm" ping="./ping.php">トップページ</a>
ping属性は、ユーザーがハイパーリンクをたどった場合に通知を受けることに関心があるリソースのURLを指定します。href属性が存在しない場合は省略する必要があります。
download属性
<a href="./index.htm" download="index.txt">トップページ</a>
download属性は、ナビゲートする代わりにリソースをダウンロードするかどうか、ダウンロードする場合はそのファイル名を指定します。href属性が存在しない場合は省略する必要があります。
気を付ける点
情報の公開
リンクを含めて記述する情報は公開される情報であるという事に留意して下さい。
アクセシビリティ
a 要素のコンテンツ（内容，テキスト）と href 属性の値を一致する様にしましょう。
リンク切れ
リンクした先が実在する必要もあります。リンク先が移転したりファイル名が変わったりするとリンク切れで先に行けません。出来るだけ変わらないアドレスを選ぶか、こまめに確認しましょう。
CSSリセット
a {background-color: transparent;}
normalize.css というリセットCSS の一部で、IE 10でアクティブなリンクの灰色の背景を削除します。
a要素の例示は、上記の CSSの効果を効かない指定をしている例です。
詳細は理解していないのですが、いろいろとバグ等の対応も含んでいる様なので、リセットCSSを利用する事をお勧めします。
おまけ
ＣＳＳを使い、
例示でのリンク先は
<a href="./index.htm">TOP PAGE</a>
アンカー要素だけの簡素なリンクです。
<form><button formaction="./index.htm">TOP PAGE</button></form>
アンカー要素の代わりにボタン要素を用いたリンクです。
<a href="./index.htm" class="canSample1d3">TOP PAGE</a>
.canSample1d3{ text-decoration:none; border:0.2em outset #00ffff; background-color:#66ffff;}
下線を消して境界を要素が出っ張る様な線を指定し、境界と背景の色を指定しています。
<a href="./index.htm" class="canSample1d4">TOP PAGE</a>
.canSample1d4{ text-decoration:none;}.canSample1d4:hover,.canSample1d4:focus{text-decoration:underline;}
下線を消して、要素の上をホバー（通過）させたときに下線を表す指定をしています。
<a href="./index.htm" class="canSample1d5">TOP PAGE</a>
.canSample1d5{ text-decoration:underline; border:1px outsettransparent ;}.canSample1d5:hover,.canSample1d5:focus{text-decoration:underline; border:1px outset #999999; border-radius:5px;}
境界線を透過で用意して、要素の上をホバー（通過）させたときに境界線を表す指定をしています。
<a href="./index.htm" class="canSample1d6">TOP PAGE</a>
.canSample1d6{ text-decoration:none;}.canSample1d6:hover,.canSample1d6:focus{position:relative; top:3px; left:3px;}
要素の上をホバー（通過）させたときに要素の位置をずらしています。