HTML5タグ虎の巻

aタグ

aタグは、ハイパーリンクを作成するタグです。

解説

aタグはhref属性でリンク先を指定できます。
リンク先として指定できるのはURL、id名です。URLを指定すれば別のWebページやファイルへリンクする事ができますし、idを指定すれば同一ページ内の特定の場所へ位置付ける事ができます。

また、ターゲット属性を指定すれば、リンクしたページを表示させる画面を指定する事も可能です。詳しくは下記属性欄をご覧ください。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
フロー・コンテンツ
フレージング・コンテンツ
インタラクティブ・コンテンツ
コンテキスト
(親カテゴリ)
フレージング・コンテンツを許可する場所
コンテンツ・モデル
(子カテゴリ)
トランスペアレント

属性

aタグには以下の属性が指定できます。

【属性】
属性説明
hrefリンク先を指定します
(リンク先にはパス、URL、id名、メール、電話番号が指定できます)
 ※idを指定する場合はid名の先頭に「#」を付けます。
 ※メールアドレスを指定する場合は先頭に「mailto:」を付けます。
 ※電話番号を指定する場合は先頭に「tel:」を付けます。
(例)href="index.html"、href="#hoge"、
  href="mailto:xxx@xxx.xx"、href="tel:9999999999"
targetリンク先を表示するフレーム名を指定する
(例)target="frm01"
※フレーム名以外にも以下のような値を指定できます。
 ・_blank:新規ターゲット
 ・_top:最上位のウィンドウ
 ・_parent:現在の親ウィンドウ
 ・_self:現在のウインドウ(初期値)
(例)target="_blank"
relリンク先に条件を指定する
※指定できる値の一例です。
 ・noopener:リンク先がwindow.openerでリンク元を参照できなくする
 ・noreferrer:リファラを送信しない
 ・next:1つ前のページを表す
 ・next:次のページを表す
(例)rel="noopener"、rel="noreferrer"
※target="_blank"を指定する時はrel="noopener"も指定すると安全です。
【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

index.htmlに遷移するリンクを作成する

<a href="index.html">ホーム</a>

自画面のid="hoge"の場所に位置付けるリンクを作成する

<a href="#hoge">hogeの場所へ移動</a>

https://www.yahoo.co.jp/ を別画面で表示するリンクを作成する

<a href="https://www.yahoo.co.jp/" target="_blank" >Yahoo!</a>

メールアドレス「xxx@xxx.xx」を指定する

<a href="mailto:xxx@xxx.xx">xxx@xxx.xx</a>

xxx@xxx.xxを宛先としてメールソフトが起動します。

電話番号「999-999-9999」を指定する

<a href="tel:9999999999">999-999-9999;/a>

携帯電話やスマホの場合は電話を発信します。

備考

  • aは、anchor(アンカー)の略です。

関連項目

  • a:ハイパーリンクを作成する
  • map:クリッカブルマップを設定する
  • area:クリッカブルマップのリンクエリアを設定する