ウェブランサー

<a> ハイパーリンクを設定する

取り扱い 標準
カテゴリ フロー・コンテント
フレージング・コンテント
インタラクティブ・コンテント
パルパブル・コンテント
親にできる要素 フロー・コンテンツ、またはフレージング・コンテンツを受け入れる要素
子にできる要素 フロー・コンテンツ、またはフレージング・コンテンツを含むトランスパレント・コンテンツ (インタラクティブ・コンテンツを除く)
対応ブラウザ <a>の対応状況を確認する

<a>タグの説明

<a>タグは、特定の要素に対してリンクを指定する際に使用します。ウェブページの特徴は、ドキュメント同士をリンクで繋いでワンクリックで移動できる点にあります。HTMLという名前が「ハイパーテキストをマークアップする言語」であるのも、このリンクの特徴を表しているからです。そういった意味で、<a>タグはHTMLの中で特に重要な要素であると言えます。

リンクを指定する場合には、特定の範囲内の文字列や要素を<a>タグで囲います。リンクの指定範囲に関しては、まずユーザーの利便性を重視してください。そのリンクをクリックした時にどのような情報が得られるのか、事前に利用者がある程度の予測を立てられる形が望ましいと言えます。

<a>タグに指定できる属性

href="URL"
リンク先のURLを指定します。ページ内ジャンプについては別記する説明を参照してください。
title="タイトル"
リンク先のタイトルを記述します
name="名前"
リンクに名前を付けて管理する事が可能です。ページ内リンクの到達点として利用出来ます。現在は廃止され、代わりにid属性を用います。
target="ターゲット"
_blank:新規ウィンドウで開く
_parent:一番外のフレームは残す
_self:同じウィンドウで開く
_top:全てのフレームを取り払ってジャンプ
_フレーム名:スレームから別のフレームへのリンク
charset="文字コード"
リンク先の文字コードを指定します。
hreflang="言語コード"
リンク先の言語コードを指定します。
type="MIMEタイプ"
リンク先のMIMEタイプを指定します。
rel="リンク先との関係性"
この文書から見たリンク先との関係を指定します。
rev="リンク先との関係性"
リンク先から見たこの文書との関係を指定します。
accesskey="アクセスキー"
ショートカットする文字を割り振ります。
shape="形状"
リンク領域の形状を指定します。
coords="領域の座標"
リンク領域の座標を指定します。
tabindex="Tab移動の順番"
Tabキーでリンクをフォーカスする順番を指定します。
id="", class=""
idやclass付けが出来ます。

<a>タグの使い方とサンプル

<a>を使ったマークアップのサンプルです。

HTML
<p>
リンクさせる文字列や画像を<a href="http://weblan3.com">このように囲い</a>ます。<br>
リンクをクリックした時に新規タブで開く場合には、<a href="http://weblan3.com" target="_blank">target属性に「_blank」を指定</a>します。<br>
<a href="http://weblan3.com" title="リンクに関する補足説明">title属性</a>を使ってツールチップに補足説明を付けることが可能です。
</p>
表示確認
リンクさせる文字列や画像をこのように囲います。
リンクをクリックした時に新規タブで開く場合には、target属性に「_blank」を指定します。
title属性を使ってツールチップに補足説明を付けることが可能です。

ページ内の特定の場所に直接ジャンプさせたい場合には、href属性のURL末尾にハッシュタグ(#)を付けて、ジャンプ先の要素のid属性に指定した値と同じ文字列を追加します。

HTML
<div id="Section1">Section1です</div>
<br>
▼同一ページ内でジャンプさせたい場合<br>
<a href="#Section1" title="Section1にジャンプする">Section1にジャンプする</a><br>
▼別のページからジャンプさせたい場合<br>
<a href="http://weblan3.com/html/a#Section1" title="Section1にジャンプする" target="_blank">Section1にジャンプする</a><br>
※リンクをクリックすると、ジャンプ先が一行目に表示されます。
表示確認
Section1です

▼同一ページ内でジャンプさせたい場合
Section1にジャンプする
▼別のページからジャンプさせたい場合
Section1にジャンプする
※リンクをクリックすると、ジャンプ先が一行目に表示されます。

<a>に関連するHTMLタグ

テキストの意味付け要素
<a> リンクを指定する
<abbr> 略語(頭字語以外)であることを表す
<b> 文字を太文字にする
<br> 改行を行う
<bdi> ページの書字方向とは別の書字方向を指定する
<bdo> 書字方向を指定する
<cite> 出典先、参照先を表す
<code> プログラムやスクリプトとして扱う
<dfn> 定義用語として扱う
<em> 強調する
<i> 文字を斜体(イタリック)にする
<kbd> キーボード入力される文字であることを示す
<mark> 文章内のテキストをハイライトして目立たせる
<q> 引用文であることを表す(短文用)
<rb> ルビをふる文字を指定する
<ruby> ルビの範囲を指定する
<rp> ルビを囲む記号を指定する
<rt> ルビの内容を指定する
<rtc> ルビテキストの集まりを指定する
<s> 正確ではなくなった内容であることを表す
<samp> プログラムによる出力結果のサンプルとして扱う
<small> 細則のような付帯注釈を表す
<span> インライン要素としての範囲を指定する
<strong> 重要な情報として扱う
<sub> 下付き文字として表示する
<sup> 上付き文字として表示する
<time> 日付や時刻を正確に示す
<u> 文字に下線(アンダーライン)を引く
<var> 変数や引数として扱う
<wbr> <nobr>内での改行位置の指定(NN独自)