a
Summary
<a>タグはハイパーリンクやリンク先を定義します。
Overview Table
概要
<a>
要素は外部サイトや、内部の別ページ・別セクション、画像やローカルファイルへのハイパーリンクを定義します。
構文
<a href="[URI]">[アンカーテキストまたはイメージタグ]</a>
<a id="#[ID]">[アンカーテキストまたはイメージタグ]</a>
<a><a>[アンカーテキストまたはイメージタグ]</a></a>
<a><a>タグで囲まれたHTML
一般的にはテキストか画像を<a></a>
タグで囲みます。
囲まれたHTMLはページ内に表示され、href属性を指定していた場合はリンクとして描画されます。
一般的な属性
名前 | 値 | 目的 | 例 | 有効 |
---|---|---|---|---|
download | テキスト | 保存ダイアログに表示するファイル名を指定することができます | download="filename.pdf" |
HTML5 |
href | URI | 対象のリンクを指定します | href="http://example.com" href="#TableOfContents" |
|
id | 識別用のテキスト | hrefで参照するためのアンカーを生成します | id="TableOfContents" |
|
hreflang | HTML5 または HTML4用の言語タグ | リンク先の言語のヒントです。 リンク元からリンク先へのヒントとしてrel="alternate"とともに記述して使用できます。 | hreflang="ja" | |
rel | カンマ区切りのキーワードリスト | 現在のページとリンク先の関係を示します | rel="help" |
|
target | ブラウジング・コンテキスト | リンクをどこで開くか指定できます | target="_blank" |
Examples
<!-- 外部サイトへのリンク --> <a href="http://www.example.com">ウェブサイト</a><!-- 同一ディレクトリの内部サイトへのリンク -->
<a href="home.html">ホーム</a><!-- ダウンロードリンク (HTML5のみ)。 download属性には保存ダイアログに予め設定するファイル名を指定します。
download属性に値を設定しない場合、リソース名が設定されます。–>
<a href="filename_on_server.pdf" download="meaningful_filename.pdf">pdfファイルをダウンロード</a><!-- target属性で指定したウィンドウでリンクを開きます。 -->
<a href="http://www.example.com" target="_blank">新しいウィンドウでウェブサイトを開</a><!-- リンクの一部分としてimg要素を導入します -->
<a href="http://www.example.com"><img src="images/bullet.png">画像リンク</a><!-- ページ内のアンカーへのリンク -->
<a href="#top">トップへ</a><!-- アンカーを定義します。 -->
<a id="top"></a><!-- javascriptの関数を呼び出す (推奨されません) -->
<a href="javascript:alert(‘リンクがクリックされました’)">リンクをクリックしてください</a><!-- ドキュメントへのリンクとリンク先のドキュメントとの関係をrel属性で指定します。 -->
<a href="http://www.example.com/help" rel="help">ヘルプへ</a>
Notes
備考
ページ内にアンカーを作成する際、name 属性はもはや誰も使っていません。idで置き換えるべきでしょう。
テキストも画像もアンカーに指定することができます。アンカーとなった画像はフチに訪問済みかどうかを示す色がつくようになります。このフチの色を表示させないためには、"img"要素のborder属性に0を設定するか、border属性を省略する必要があります。CSS属性を使用することで、a要素とimg要素のデフォルトの見た目を上書くことができます。
URIはhttpやmailto、fileなどのプロトコルを指定します。 フラグメント(#に続くテキスト)を指定することで現在のページの特定の位置へジャンプできます。メニューの中の現在のページを参照するようなプレースホルダーリンクであることを示す場合、href属性は省略することができます
また、任意ですが、rel属性で対象のリンクにセマンティックな意味を付与することができます。
a
要素に関連する国際化トピック:
クリックとフォーカス
ブラウザ/OS別 アンカーをクリックした際、自動でフォーカスが切り替わるか
アンカーをクリックしたときフォーカスされるか?
Desktop Browsers | Windows 8.1 | OS X 10.9 |
---|---|---|
Firefox 30.0 | Yes | Yes |
Chrome >=39 | Yes | Yes |
Safari 7.0.5 | N/A | tabindex のみ
|
Internet Explorer 11 | Yes | N/A |
Presto (Opera 12) | Yes | ??? |
アンカーをタップしたときフォーカスされるか?
Mobile Browsers | iOS 7.1.2 | Android 4.4.4 |
---|---|---|
Safari Mobile | tabindex のみ
|
N/A |
Chrome 35 | ??? | tabindex のみ
|
Related specifications
- HTML 5.1
- W3C Working Draft
- HTML 5
- W3C Recommendation
- HTML 4.01
- W3C Recommendation
Attributions
Mozilla Developer Network : Article
Microsoft Developer Network: [Windows Internet Explorer API reference Article]