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：１つ前のページを表す ・next：次のページを表す （例）rel="noopener"、rel="noreferrer" ※target="_blank"を指定する時はrel="noopener"も指定すると安全です。 |
| 属性 | 説明 |
|---|---|
| class | クラスを指定する （例）class="hoge" |
| id | IDを指定する （例）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（アンカー）の略です。
