ハイパーテキスト
- a〔リンク、アンカー〕
a
リンク、アンカー
2008/3/26
構文
<a name=”アンカー名”> ～ </a>
<a href=”URL”> ～ </a>
<a href=”URL”> ～ </a>
説明
a要素は、ハイパーリンクを表すインライン要素です。
a要素を入れ子にすることはできません。
リンクを設置する場合
a要素のhref属性に指定したリンク先のURIを指定します。 拡張子が、htmlやphpなどWebページの場合は、そのページを開きます。 拡張子が、zipやpdfのファイルのURIを指定した場合は、そのファイルのダウンロードアラートが表示されます。
<!-- Google検索へのリンク --> <p><a href="http://google.co.jp/" title="Google">Google</a></p>
アンカーを設置する場合
XHTML 1.1ではid属性のみですが、XHTML 1.0では後方互換性を考慮し、a要素にname属性とid属性の両方を指定しましょう。 この場合、name属性とid属性には同じ値を指定します。
<!-- ページの先頭へのアンカー --> <a name="pagetop" id="pagetop"></a> ･･･（略）･･･ <p><a href="#pagetop">▲ページの先頭へ</a></p>
属性
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| 一般属性 | - | STF | S | 任意 | style属性はCSSで代替。 |
| focus="%Script" | フォーカスが当たった時。 | STF | S | 任意 | |
| charset="%Charset" | href属性で指定したリンク先の文字コードを指定。文字コードには、「utf-8」「utf-16」「shift_jis」「euc-jp」などを指定可能。 | STF | S | 任意 | |
| type="%ContentType" | href属性で指定したリンク先の文書型を指定。HTML文書の場合は、「text/html」を指定する。 | STF | S | 任意 | |
| name="%NMTOKEN" | アンカーの名前を指定。 | STF | S | 任意 | |
| href="%URI" | リンク先のURIを指定。 | STF | S | 任意 | |
| hreflang="%LanguageCode" | リンク先の言語を指定します。 | STF | S | 任意 | |
| rel="%LinkTypes" | 現在のページから、href属性で指定したリンク先に対する関係を指定。「rel="next"」を指定した場合は、リンク先のページが現在のページの次のページであることを意味します。 | STF | S | 任意 | |
| rev="%LinkTypes" | href属性で指定したリンク先から、現在のページに対する関係を指定。「rev="prev"」を指定した場合は、現在のページがリンク先のページの前のページであることを意味します。 | STF | S | 任意 | |
| shape="%Shape" | 領域の形状を指定。デフォルトは"rect"。 | STF | S | 任意 | |
| coords="%Coords" | デフォルトは"rect"。 | STF | S | 任意 | |
| target="%FrameTarget" | href属性で指定したリンク先の開き方を指定。デフォルトは同一内ウィンドウで開く（_self）。別ウィンドウに開く場合は「target="_blank"」、トップフレームに開く場合は「target="_top"」、親フレームに開く場合は「target="_parent"」を指定。 | TF | - | 任意 | 非推奨（JavaScriptで代替） |
a要素のtarget属性は、XHTML 1.0 Strict および XHTML 1.1 で廃止になりました。
- target属性 ⇒ JavaScript（window.open()メソッド）で代替。
サンプル
<!-- 見出しインデックス＋見出しのリンクとアンカー --> <ol> <li><a href="#qs1">質問1？</a></li> <li><a href="#qs2">質問1？</a></li> <li><a href="#qs3">質問3？</a></li> </ol> <dl> <dt><a name="qs1" id="qs1">質問1？</a></dt> <dd>回答です。回答です。回答です。</dd> <dt><a name="qs2" id="qs2">質問2？</a></dt> <dd>回答です。回答です。回答です。</dd> <dt><a name="qs3" id="qs3">質問3？</a></dt> <dd>回答です。回答です。回答です。</dd> </dl>