<a href=""></a>
| ブラウザ |
|
|---|---|
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ（HTML 5.1ではhref属性がある場合に限る） / パルパブル・コンテンツ |
| 利用場所 | フレージング・コンテンツが置ける場所 |
| 内容 | トランスペアレント（親要素のコンテンツモデルを継承） ただし、インタラクティブ・コンテンツは含められない |
a要素は、ハイパーリンクを表します。（またはプレースホルダを表します）
- デフォルトスタイル（下線）
<a href="example.html">リンクテキスト</a>
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性 | |||
href="" |
リンク先の指定 | URL | リンク先のURL |
hreflang="" |
リンク先の記述言語 | 言語コード | ja、en、zh、等 |
type="" |
リンク先のMIMEタイプ | MIMEタイプ | |
rel="" |
現在の文書から見たリンク先の関係 | リンクタイプ | 半角スペース区切りで複数指定可能 |
target="" |
リンク先の表示方法 | _blank |
新規のウィンドウに表示 |
_self |
現在のウィンドウ（フレーム）に表示 | ||
_parent |
親ウィンドウ（フレーム）に表示 | ||
_top |
フレームを解除してウィンドウ全体に表示 | ||
| ウィンドウ名、フレーム名 | 任意のウィンドウ（フレーム）に表示 | ||
download="" |
 ダウンロード用のリンクを指定 |
ファイル名 | デフォルトのファイル名を指定 |
rev="" |
 リンク先から見た現在の文書の関係 |
リンクタイプ | 半角スペース区切りで複数指定可能 |
| 仕様から除外（使用することは可能） | |||
name="" |
到達点にするための名前 | 文字列 | 固有の識別名 |
- href属性を指定しない場合は、その他の任意属性（hreflang属性、type属性、rel属性、rev属性、target属性、download属性）も指定できません。
target属性とdownload属性の詳細については、下記のページを参考にしてください。
リンクの設定方法
リンクを設定したい場合は、リンク先のURLをhref属性で指定します。
<p><a href="example.html">リンクテキスト</a></p>
a要素の内容について
a要素の内容には、（従来で言う）ブロックレベル要素も配置できるようになりました。そのため、次のように段落ごとリンクを設定することが可能です。
<section>
<a href="example.html">
<p>段落のテキスト。</p>
<p>段落のテキスト。</p>
</a>
</section>
ただし、この要素は親要素のコンテンツ・モデルを継承するため、親要素の種類によってはフロー・コンテンツを配置できない場合もあります。例えば、次の例では文法違反となります。（p要素内にはフレージング・コンテンツしか配置できないため）
<p>
<a href="example.html">
<p>段落のテキスト。</p>
<p>段落のテキスト。</p>
</a>
</p>
プレースホルダについて
href属性が指定されていないa要素は、プレースホルダ（場所取り）を表すことになります。詳しくは下記のページを参考にしてください。
要素のデフォルトスタイル
一般的なブラウザでは、この要素内のテキストは下線付きで表示されます。（href属性が指定されている場合）
- HTML5における変更点
-
- 要素の定義に、href属性のないa要素はプレースホルダを表すが追加されました。
- download属性が追加されました。
- name属性が仕様から除外されました。（使用することは可能）
- charset属性、rev属性、shape属性、coords属性が廃止されました。
- （従来で言う）ブロックレベル要素を含められるようになりました。
- HTML 5.1における変更点
-
- rev属性が復活しました。
- href属性がないa要素は、インタラクティブ・コンテンツとしては扱われなくなりました。
使用例
<p><a href="../index.html">HTML5リファレンス</a></p>
- 表示例
<p><a href="../../index.html"><img src="tagindex.gif" alt="TAG index" width="88" height="31"></a></p>
- 表示例
-
- 画像でリンクすると、一部のブラウザ（IE 9 等）では画像の周囲に境界線が表示されます。この境界線を消したい場合は、CSSで次のように指定しておきます。
a img { border: none; }
<a href="../index.html">
<section>
<h2>HTML5リファレンス</h2>
<p>カテゴリー別に掲載されたHTML5リファレンス。</p>
<p>100以上の要素を使用例付きで紹介しています。</p>
</section>
</a>
<p><a href="example.html" rel="nofollow">フォローしない</a></p>
<p><a href="english.html" rel="alternate" hreflang="en">HTML5 Reference</a></p>
<p><a href="report.pdf" type="application/pdf">報告書（PDF）</a></p>