HTML <a>

アンカー(anchor)を設定します。アンカーをクリックすると、リンク先にジャンプすることができます。 <A>はインライン要素です。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。a 要素の終了タグは省略できない。

<a>
  <!-- transparent  -->
</a>

コンテンツモデル

a要素のコンテンツモデルは透過的である。つまり、コンテンツモデルは変更されない。フローコンテンツの中であればフローコンテンツ、記述コンテンツの中であれば記述コンテンツをa要素の開始タグと終了タグの間に含めることができる。

属性

属性は全て省略可能です。

accesskey

アクセスキーを指定する。アクセスキーを指定すると、キーボード操作でリンク、ボタンおよび入力フォームへジャンプすることができる。アクセスキーの操作方法は、OSやウェブブラウザによって異なる。

アクセスキーの操作方法
OS	ウェブブラウザ	アクセスキーの操作方法
Linux	Chrome	Alt + Shift + アクセスキー
Linux	Firefox	Alt + Shift + アクセスキー
Mac	Chrome	control + option + アクセスキー
	Firefox	control + option + アクセスキー
	Safari	control + option + アクセスキー
Windows	Chrome	Alt + アクセスキー
	Edge	Alt + アクセスキー
	Firefox	Alt + Shift + アクセスキー
	Internet Explorer	Alt + アクセスキー

draggable

ドラッグ可能かどうかを指定する。

<a href="/" draggable="true">SE学院</a>
<a href="/" draggable="false">SE学院</a>

SE学院

name

名前を指定します。指定した名前にリンクするときは、hrefに"#name"と指定します。他のページの指定した名前にリンクするときは、hrefに"URI#name"と指定します。

href

リンク先のURIを「scheme:expr」の形式で指定する。schemeには、IANAのURIスキームを指定する。

URIスキーム
URI scheme	Description
file	ホストのファイル
ftp	File Transfer Protocol
http	Hypertext Transfer Protocol
https	Hypertext Transfer Protocol Secure
mailto	電子メールアドレス
javascript	JavaScript (IANAのURI Schemeには未登録)

httpスキームの例を示す。

<a href="http://itref.fc2web.com/">SE学院</a>

相対パスで指定することもできる。

<a href="../index.html">SE学院</a>

HTML文書の先頭ではなく、HTML文書内の特定箇所へリンクするときは、#識別子（リンク先がリンク元と同じHTML文書内の場合）または、uri#識別子（リンク先がリンク元と異なるHTML文書内の場合）と指定する。

<a href="#attr">属性</a>

<a href="http://itref.fc2web.com/html/a.html#attr">a要素の属性</a>

hrefのURIとして "mailto:メールアドレス" を指定すると、アンカーをクリックしたときにメーラーが起動されて、指定のメールアドレスにメールを書くことができます。 <BASE> で基準URIが指定されているときは、基準URIからの相対指定となります。 javascript: に続けてJavaScriptを記述することもできます。

<a href="mailto:hyouban-info@en-japan.com">メールを出す</a>

メールを出す

target

リンク先のページを開くときに現在のウィンドウを使うか、新しいウィンドウを開くかを指定します。省略した場合は、現在のウィンドウを使います。

A要素のtarget属性に指定可能な値
値	意味
_self	現在のウィンドウを使います（規定値）
_blank	新しいウィンドウ又は新しいタブを開きます
_top	フレーム分割している場合、フレームを解除して現在のウィンドウを使います
名前	指定した名前のフレームを使います

<a href="https://segakuin.com/" target="_blank">SE学院</a>

SE学院

rel

この文章から見た参照先文書との関係。

A要素のrel属性に指定可能な値
属性値	意味
Alternate	代替文書
Contents	目次
Copyright	著作権情報
Glossary	用語集
Index	索引
Next	次の文書
Parent	親（上位）の文書
Prev	前の文書
sponsored	広告や有料プレースメントのリンク（有料リンク）
Stylesheet	スタイルシート

rev

参照先文書から見たこの文書との関係。指定できる属性値はrel属性と同じ。

shape

クリック可能な領域の形状を次の属性値の中から指定します。

shape属性
属性値	意味
rect	矩形
poly	多角形
circle	円形
default	デフォルト

coords

リンク領域の座標指定形式を次の属性値の中から指定します。

coords属性
属性値	意味
rect	左上の座標 (x1, y1) と右下の座標 (x2, y2) を x1,y1,x2,y2 の形式で指定（規定値）
poly	各辺の座標を指定
circle	円の中心の座標 (x, y) と円の半径 (r) を x,y,r の形式で指定

ondblclick

a要素をダブルクリックしたとき実行するJavaScriptを指定する。

title

ターゲット・リソースのタイトルや説明など、ツールチップに適した要素のアドバイザリ情報を指定する。

使用例

A 要素の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<a href="https://tsuker.net/">資産運用のすゝめ</a>

資産運用のすゝめ

HTML文書の先頭ではなく、HTML文書内の特定個所へジャンプさせる場合、リンク先を設定する方法が2通りあります。

a要素のname属性に名前を指定する。
ジャンプ先の要素のid属性に識別子を指定する。

XHTML 1.1では、a要素のname属性が廃止されたので、id属性に識別子を指定する方法しかありません。

a要素のname属性に名前を指定する例を次に示します。

<h2><a name="SYNTAX">構文</a></h2>

<p><a href="#SYNTAX">ここ</a>をクリックすると、構文へ戻ります。</p>

ここをクリックすると、構文へ戻ります。

ジャンプ先の要素のid属性に識別子を指定する例を次に示します。

<h2 id="ATTRIBUTES">属性</h2>

<p><a href="#ATTRIBUTES">ここ</a>をクリックすると、属性へ戻ります。</p>

ここをクリックすると、属性へ戻ります。

リンクをクリックした際、JavaScriptの実行のみ行い、どこの画面にも遷移させたくない場合、return falseを実行する。onclickイベントハンドラの返り値としてfalseを返した場合、画面遷移処理は行われなくなる。

<a href="# " onclick="foo();return false ">

参考文献

Web Hypertext Application Technology Working Group (2024) "Text-level semantics" HTML Living Standard