HTML <a> タグ

定義と使用方法

<a> タグは、一つのページから別のページにリンクするためのハイパーリンクを定義します。

<a> 要素がもっとも重要な属性は href 属性は、リンクの目的を示します。

デフォルトでは、リンクはすべてのブラウザで以下のように表示されます：

  • アクセスしていないリンクは、下線と青色で表示されます
  • アクセスしたリンクは、下線と紫色で表示されます
  • 現在アクセスしているリンクは、下線と赤色で表示されます

ヒント：CodeW3C.com サイト内のリンクの外観は、デフォルトのリンクの外観と非常に異なります。以下を使用して、 CSS 伪クラス テキストのハイパーリンクに複雑で多様なスタイルを追加します。

も参照してください：

HTML 教程：HTML リンク

HTML DOM リファレンスマニュアル：Anchor オブジェクト

CSS 教程：リンクのスタイル

用語解説

超テキストとは何ですか？

例

例 1

codew3c.comにリンクを作成する：

<a href="https://www.codew3c.com">codew3c.comにリンク</a>

自分で試してみてください

例 2

画像をリンクとして使用する方法は：

<a href="https://www.codew3c.com">
<img border="0" alt="W3School" src="w3logo.png" width="400" height="225">
</a>

自分で試してみてください

例 3

新しいブラウザウィンドウでリンクを開く方法は：

<a href="https://www.codew3c.com" target="_blank">codew3c.comにアクセス！</a>

自分で試してみてください

例 4

メールアドレスにリンクする方法は：

<a href="mailto:someone@example.com">メールを送信</a>

自分で試してみてください

例 5

電話番号にリンクする方法は：

<a href="tel:+8613888888888">+86 138 8888 8888</a>

自分で試してみてください

例 6

同一ページの別の部分へのリンク方法：

<a href="#section2">第二章に移動</a>

自分で試してみてください

例 7

JavaScriptへのリンク方法：

<a href="javascript:alert('Hello World!');">JavaScriptを実行</a>

自分で試してみてください

ヒントとコメント

ヒント：aタグにhref属性がなければ、それは単なる超リンクの占位符に過ぎません。

ヒント：リンクされたページは通常、別のターゲット（target属性で指定）を除いて、現在のブラウザウィンドウに表示されます。

ヒント：リンクのスタイルを CSS 設定で指定してください：CSS リンク および CSS ボタン。

属性

属性 値 説明
download ファイル名 ユーザーがリンクをクリックしたときにダウンロードするターゲットを指定します。
href URL リンク先のページの URL を指定します。
hreflang 言語コード リンクされたドキュメントの言語を指定します。
media メディアクエリ リンクされたドキュメントがどのメディア/デバイスに最適化されているかを指定します。
ping URL リスト スペースで区切られた URL リストを指定します。リンクがアクセスされたとき、ブラウザはピングの本文を含む POST リクエストを送信します（バックグラウンドで送信）。通常、トラッキングに使用されます。
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 リンクと一緒に送信する参照情報を指定します。
rel
  • alternate
  • author
  • bookmark
  • external
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • noopener
  • prev
  • search
  • tag
 現在のドキュメントとリンクされたドキュメントの関係を指定します。
target
リンクされたドキュメントをどこで開くかを指定します。
type メディアタイプ リンクされたドキュメントのメディアタイプを指定します。

グローバル属性

<a> タグは以下をサポートしています HTML内のグローバル属性。

イベント属性

<a> タグは以下をサポートしています HTML内のイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値で表示します <a> 要素：

a:link, a:visited {
  color: (内部値);
  text-decoration: underline;
  cursor: auto;
}
a:link:active, a:visited:active {
  color: (内部値);
}

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート