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

構文

HTML

<A [attribute=value ...]> content-model </A>

XHTML

<a [attribute=value ...]> content-model </a>

開始タグと終了タグは省略できません。

内容モデル

<A> と </A> の間にはインライン要素を入れることができます。ただし、A要素タイプ自身を除きます。入れ子はできません。

属性

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

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/">システムエンジニアのスキルアップ</a>

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

<a href="../index.html">システムエンジニアのスキルアップ</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を記述することもできます。

target

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

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

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

A要素のrel属性に指定可能な値
属性値 意味
Alternate 代替文書
Contents 目次
Copyright 著作権情報
Glossary 用語集
Index 索引
Next 次の文書
Parent 親(上位)の文書
Prev 前の文書
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 の形式で指定

HTMLのバージョンにより、指定できる属性が異なります。HTMLのバージョンごとに指定できる属性の一覧を次の表に示します。

a要素の属性
属性 HTML 4.01 Transitional HTML 4.01 Strict XHTML 1.0 Strict HTML5
charset Supported Supported Supported
type Supported Supported Supported
name Supported Supported Supported
href Supported Supported Supported
hreflang Supported Supported Supported
target Supported Not supported Not supported
rel Supported Supported Supported
rev Supported Supported Supported
accesskey Supported Supported Supported
shape Supported Supported Supported
coords Supported Supported Supported
tabindex Supported Supported Supported
id Supported Supported Supported Supported
class Supported Supported Supported Supported
style Supported Supported Supported Supported
title Supported Supported Supported Supported
lang Supported Supported Supported Supported
xml:lang Not supported Not supported Supported Not supported
dir Supported Supported Supported Supported
onclick Supported Supported Supported Supported
ondblclick Supported Supported Supported Supported
onmousedown Supported Supported Supported Supported
onmouseup Supported Supported Supported Supported
onmouseover Supported Supported Supported Supported
onmousemove Supported Supported Supported Supported
onmouseout Supported Supported Supported Supported
onkeypress Supported Supported Supported Supported
onkeydown Supported Supported Supported Supported
onkeyup Supported Supported Supported Supported

DTD

HTML の各要素は DTD によって定義されています。 A 要素が DTD でどのように定義されているかを見るには、次のリンクをクリックしてください。

使用例

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

<a href="http://welcome2mycomputer.blogspot.jp/ ">Welcome to my computer</a>

Welcome to my computer

<a href="http://welcome2mycomputer.blogspot.jp/ " target="_blank ">Welcome to my computer (別ウィンドウ)</a>

Welcome to my computer (別ウィンドウ)

<a href="mailto:sales@kru2krungthep.com ">メールを出す</a>

メールを出す

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

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

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

<h2><a name="format ">書式</a></h2>
<p><a href="#format ">ここ</a>をクリックすると、書式へ戻ります。</p>

ここをクリックすると、書式へ戻ります。

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

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

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

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

<a href="# " onclick="foo();return false ">
スポンサーリンク