W3Schools.com へのリンク：
<a href="http://www.w3schools.com">Visit W3Schools.com!</a>
Try it Yourself ❯
他の "Try it Yourself" の例が下にあります。
<a> タグは、あるページから他のページへリンクするためのハイパーリンクを定義します。
<a> 要素の最も重要な属性は、リンク先を示す href 属性です。
デフォルトでは、すべてのブラウザによってリンクは次のように表示されます：
| 要素 | |||||
|---|---|---|---|---|---|
| <a> | Yes | Yes | Yes | Yes | Yes |
チップ: 次の属性：download、hreflang、media、rel、target、type は、href 属性がなければ指定できません。
チップ: 他のターゲットを指定しない限り、リンク先のページは、通常、現在のブラウザウィンドウに表示されます。
チップ: リンクのスタイルには CSS を使用します：CSS リンク・チュートリアル & CSS ボタン・チュートリアル
HTML4.01における <a> タグは、ハイパーリンクやアンカーの何れかにすることができます。 HTML5 では、<a> タグは常にハイパーリンクですが、href 属性がない場合は、ハイパーリンクのための単なるプレースホルダになります。
HTML5 には、いくつかの新しい属性がありますが、HTML 4.01 の一部の属性はサポートされなくなりました。
= HTML5 で新規追加。
| 属性 | 値 | 説明 |
|---|---|---|
| charset | char_encoding | HTML5 ではサポート対象外。 リンク先の文書の文字セットを指定する |
| coords | coordinates | HTML5 ではサポート対象外。 リンク先の座標を指定する |
| download | filename | ユーザがハイパーリンクをクリックしたときの、ダウンロードするターゲットを指定する |
| href | URL | リンク先のページの URL を指定する |
| hreflang | language_code | リンク先の文書の言語を指定する |
| media | media_query | リンク先の文書が、どのメディア/デバイスに最適化されているかを指定する |
| name | section_name | HTML5 ではサポート対象外。
代わりに、グローバル id attribute を使用。
アンカー名を指定する |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
現在の文書とリンク先の文書との関係を指定する |
| rev | text | HTML5 ではサポート対象外。 リンク先の文書と現在の文書との関係を指定する |
| shape | default rect circle poly |
HTML5 ではサポート対象外。 リンク（クリッカブルマップ）の形状を指定する |
| target | _blank _parent _self _top framename |
リンク先文書を開く場所を指定する |
| type | media_type | リンク先文書のメディアタイプを指定する |
<a> タグは、HTML のグローバル属性もサポートします。
<a> タグは、HTML のイベント属性もサポートします。
ハイパーリンクの作成
ハイパーリンクの作成方法。
リンクとしての画像
リンクとして画像を使用する方法。
新しいブラウザウィンドウにリンクを開く
訪問者が Web サイトを離れる必要がないように、、新しいブラウザウィンドウでリンクを開く方法。
mailto リンクの作成
メールメッセージへリンクする方法（メールがインストールされている場合のみ動作します）。
mailto リンクの作成 2
他の mailto リンク。
指定したidを持つ要素へのリンク
ページ内に指定した id を持つ要素にリンクする方法（name 属性は、HTML5 ではサポートされません）。
JavaScript へのリンク
href 属性の中に JavaScript を追加する方法。
HTML チュートリアル：HTML Links
HTML DOM リファレンス：Article オブジェクト
CSS チュートリアル：Styling Links
ほとんどのブラウザでは、次のデフォルト値で <a> 要素が表示されます：
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}