HTML <a>タグ

❮前へ完全なHTMLリファレンス次へ❯

例

W3Schools.comへのリンクを作成します。

<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

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

<a>要素の最も重要な属性はhref、リンクの宛先を示す属性です。

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

未訪問のリンクには下線が引かれ、青色になっています
訪問したリンクには下線が引かれ、紫色になっています
アクティブなリンクには下線が引かれ、赤で表示されます

ヒントと注意

ヒント：<a>タグに属性がない場合href、それはハイパーリンクのプレースホルダーにすぎません。

ヒント：別のターゲットを指定しない限り、リンクされたページは通常、現在のブラウザウィンドウに表示されます。

ヒント： CSSを使用してリンクのスタイルを設定します：CSSリンクとCSSボタン。

ブラウザのサポート

Element
<a>	Yes	Yes	Yes	Yes	Yes

属性

Attribute	Value	Description
download	filename	Specifies that the target will be downloaded when a user clicks on the hyperlink
href	URL	Specifies the URL of the page the link goes to
hreflang	language_code	Specifies the language of the linked document
media	media_query	Specifies what media/device the linked document is optimized for
ping	list_of_URLs	Specifies a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking.
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url	Specifies which referrer information to send with the link
rel	alternate author bookmark external help license next nofollow noreferrer noopener prev search tag	Specifies the relationship between the current document and the linked document
target	_blank _parent _self _top	Specifies where to open the linked document
type	media_type	Specifies the media type of the linked document

グローバル属性

この<a>タグは、HTMLのグローバル属性もサポートしています。

イベント属性

この<a>タグは、HTMLのイベント属性もサポートしています。

その他の例

例

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

例

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

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

例

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

<a href="mailto:[email protected]">Send email</a>

例

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

例

同じページの別のセクションにリンクする方法：

<a href="#section2">Go to Section 2</a>

例

JavaScriptにリンクする方法：

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

デフォルトのCSS設定

ほとんどのブラウザは<a>、次のデフォルト値で要素を表示します。

a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}

a:link:active, a:visited:active {
color: (internal value);
}