<a href=""></a>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ(HTML 5.1ではhref属性がある場合に限る) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 トランスペアレント(親要素のコンテンツモデルを継承) ただし、インタラクティブ・コンテンツは含められない

a要素は、ハイパーリンクを表します。(またはプレースホルダを表します)


<a href="example.html">リンクテキスト</a>

属性
任意属性
href="" リンク先の指定 URL リンク先のURL
hreflang="" リンク先の記述言語 言語コード jaenzh、等
type="" リンク先のMIMEタイプ MIMEタイプ
rel="" 現在の文書から見たリンク先の関係 リンクタイプ 半角スペース区切りで複数指定可能
target="" リンク先の表示方法 _blank 新規のウィンドウに表示
_self 現在のウィンドウ(フレーム)に表示
_parent 親ウィンドウ(フレーム)に表示
_top フレームを解除してウィンドウ全体に表示
ウィンドウ名、フレーム名 任意のウィンドウ(フレーム)に表示
download="" [+]ダウンロード用のリンクを指定 ファイル名 デフォルトのファイル名を指定
rev="" [5.1]リンク先から見た現在の文書の関係 リンクタイプ 半角スペース区切りで複数指定可能
仕様から除外(使用することは可能)
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における変更点
HTML 5.1における変更点

使用例

テキストでリンクした例

<p><a href="../index.html">HTML5リファレンス</a></p>

表示例

HTML5リファレンス

画像でリンクした例

<p><a href="../../index.html"><img src="tagindex.gif" alt="TAG index" width="88" height="31"></a></p>

表示例

TAG index

  • 画像でリンクすると、一部のブラウザ(IE 9 等)では画像の周囲に境界線が表示されます。この境界線を消したい場合は、CSSで次のように指定しておきます。 a img { border: none; }
ブロックごとリンクした例

<a href="../index.html">

<section>
<h2>HTML5リファレンス</h2>
<p>カテゴリー別に掲載されたHTML5リファレンス。</p>
<p>100以上の要素を使用例付きで紹介しています。</p>
</section>

</a>

表示例

HTML5リファレンス

カテゴリー別に掲載されたHTML5リファレンス。

100以上の要素を使用例付きで紹介しています。

リンク先をフォローしない例

<p><a href="example.html" rel="nofollow">フォローしない</a></p>

翻訳版(英語)の文書へリンクした例

<p><a href="english.html" rel="alternate" hreflang="en">HTML5 Reference</a></p>

PDFファイルへリンクした例

<p><a href="report.pdf" type="application/pdf">報告書(PDF)</a></p>