This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

a

Summary

<a>タグはハイパーリンクやリンク先を定義します。


Overview Table

DOM Interface
HTMLAnchorElement

概要

<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>

View live example

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

Template:Feature=a


Attributions