HTML5タグ虎の巻

aタグ

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

解説

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

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

コンテンツ・モデル

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

属性

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

【属性】
属性説明
hrefリンク先を指定する
リンク先にはパス、URL、id名が指定できます。
idを指定する場合はid名の先頭に「#」を付けます。
(例)href="index.html"、href="#hoge"
targetリンク先を表示するフレーム名を指定する
(例)target="frm01"
※フレーム名以外にも以下のような値を指定できます。
 ・_blank:新規ターゲット
 ・_top:最上位のウィンドウ
 ・_parent:現在の親ウィンドウ
 ・_self:現在のウインドウ
(例)target="_blank"
relリンク先に条件を指定する
(例)rel="noopener"、rel="noreferrer"
※target="_blank"を指定する時はrel="noopener"も指定すると安全です。
【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

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

サンプル

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>

備考

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

関連項目

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