HTML <a>

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

構文

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

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

コンテンツモデル

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

属性

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

accesskey
アクセスキーを指定する。アクセスキーを指定すると、キーボード操作でリンク、ボタンおよび入力フォームへジャンプすることができる。アクセスキーの操作方法は、OSやウェブブラウザによって異なる。
アクセスキーの操作方法
OS ウェブブラウザ アクセスキーの操作方法
Linux Chrome Alt + Shift + アクセスキー
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学院

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通りあります。

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

疑似クラス

a 要素に関する擬似クラスを以下に示す。

a:active

:active はアクティブになっているリンクを表す擬似クラスである。リンクをクリックしたときのスタイルを指定できる。

a:active {
  font-size: xx-large;
}

a:hover

:hover はホバーになったリンクを表す擬似クラスである。リンクの上にマウスポインタを乗せたときのスタイルを指定できる。

a:hover {
  color: red;
}

a:visited

:visited はターゲットへ既に訪れているリンクを表す擬似クラスである。

a:visited {
  color: green
}

関連項目

参考文献