<a> ハイパーリンクを設定する
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ フレージング・コンテンツ インタラクティブ・コンテンツ パルパブル・コンテンツ |
親にできる要素 | フロー・コンテンツ、またはフレージング・コンテンツを受け入れる要素 |
子にできる要素 | フロー・コンテンツ、またはフレージング・コンテンツを含むトランスパレント・コンテンツ(インタラクティブ・コンテンツを除く) |
対応ブラウザ | caniuseで確認 |
<a>タグの説明
<a>
は、特定の要素に対してリンクを指定する際に使用します。ウェブページの特徴は、ドキュメント同士をリンクで繋いでワンクリックで移動できる点にあります。HTMLという名前が「ハイパーテキストをマークアップする言語」であるのも、このリンクの特徴を表しているからです。そういった意味で、<a>
はHTMLの中で特に重要な要素であると言えます。
リンクを指定する場合には、特定の範囲の文字列や要素を<a>
〜</a>
で囲います。リンクの指定範囲に関しては、まずユーザーの利便性を重視して下さい。そのリンクをクリックした時にどのような情報が得られるのか、事前に利用者が予測できる設計が望ましいでしょう。
リンクの指定方法には、大きく分けて3つの手段があります。一つは、「http」から始まるドメイン全体を指す「絶対パス」。もう一つは、参照元のドキュメントから同じサーバーの位置関係を表す「相対パス」。そして参照しているページの中を移動するページ内リンクです。詳しい内容は、「ハイパーリンクの解説」を参照して下さい。
<a>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果として文字の色が変わり、アンダーラインが引かれます。更にマウスオーバーや訪問済みなどの状況によって効果が変化します。変更したい場合はスタイルシートで調整して下さい。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<a>に指定できる主な属性
- href="URL"
- リンク先のURLを指定します。リンクの書き方はサンプルの項目で解説します。
- title="任意の文字列"
- リンク先のタイトルを記述します。ユーザーの利便性を考慮した案内の役割りです。
- target="_Keyword"
- リンク先の内容を開く環境を制御します。
_self
:同じウィンドウで開く(初期値)_blank
:新しいタブまたは新しいウィンドウで開く_parent
:親の閲覧コンテキストがある場合はそこで開く_top
:最上位の閲覧コンテキストで開く
- rel="リンク先との関係性"
- この文書から見たリンク先との関係を指定します。特に
target
属性を使用する場合は、セキュリティリスクを考慮した記述が求められます。 - download
- リンク先のURLをダウンロード・コンテンツとして扱います。ブラウザはファイルの拡張子によって自動的に判別するので、基本的には省略できます。
<a href="###" download>
:理論値として扱う場合<a href="###" download="###.xxx">
:ファイルを直接指定する場合
- ping
- リンクをクリックした時にping(POSTメソッドのリクエスト)を送信する値を指定します。ここにはpingの送信先となるURLを記載します。例えばリンクURLにGETパラメーターを付加することなく、アクセスログの計測が行えます。
- referrerpolicy
- リンクをたどる時に、どれだけのリファラを送信するかを指定します。
no-referrer
:リファラを送信しません。no-referrer-when-downgrade
:オリジンにTLS(HTTPS)がなければリファラは送信されません。origin
:送信されるリファラを参照元のページのオリジンに限定します。origin-when-cross-origin
:クロス・オリジンの場合に送信されるリファラは、スキーム、ホスト名、ポート番号に限定されます。同じオリジンに移動する場合はパスが含まれます。same-origin
: 同じオリジンの場合にのみリファラが送られます。オリジン間リクエストではリファラ情報を送りません。strict-origin
:セキュリティ水準が同じである場合(HTTPS→HTTPS)は、文書のオリジンのみが送られます。安全性が下がる移動先(HTTPS→HTTP)には送信されません。strict-origin-when-cross-origin
:同一オリジンへのリクエストを行う場合、URL全体を送信します。セキュリティ水準が同じである場合(HTTPS→HTTPS)は、文書のオリジンのみが送信されます。安全性が下がる移動先(HTTPS→HTTP)には送信されません。unsafe-url
:文書のオリジンおよびパスを含むリファラを送信します(ただしフラグメント、パスワード、ユーザー名は含みません)。この値はオリジンとパスを、TLSで保護されたリソースから安全ではないオリジンに漏洩させます。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<a>の使い方とサンプル
このタグを使ったマークアップのサンプルです。最も基本的な使い方は、文字列の一部をリンクにして別のページへ移動する手段を与えることです。
<div>
任意の文字列を囲った部分が「<a href="https://weblan3.com">ハイパーリンク</a>」になります。
</div>
画像にリンクを設定することもできます。
<a href="https://weblan3.com">
<img src="../images/logo.png" alt="サンプル画像">
</a>
特定の要素全体をリンクにすることも可能です。
<a href="https://weblan3.com">
<div style="padding:5px; border:1px solid #333;">
要素全体をリンク
</div>
</a>
リンクの指定方法には、いくつかの形式が用意されています。絶対パスと相対パスについて詳しく知りたい方は、ハイパーリンクの解説をご覧下さい。
<div>
これは「<a href="https://weblan3.com/html/">絶対パス</a>」です。
</div>
<div>
これは「<a href="./html">相対パス</a>」です。
</div>
<div>
これは「<a href="#要素のid名">ページ内リンク</a>」です。
</div>
リンク先を別のウィンドウやタブで開きたい場合は、target
属性を使います。リンク先が外部ドメインの場合、セキュリティリスクを考慮してrel属性を追加しましょう。
<div>
target属性に「<a href="https://example.com" target="_blank">_blank</a>」を指定。
</div>
<div>
安全性を考慮して「<a href="https://example.com" target="_blank" rel="noopener noreferrer">rel属性</a>」を追加しましょう。
</div>
ページ内の特定の場所に移動させたい場合は、href
属性のURL末尾にハッシュタグ(#)を付けて、ジャンプ先の要素のid
属性に記述した値と同じ文字列を追加します。
<div id="Section-1">
<h5>Section-1です</h5>
<p>▼同一ページ内でジャンプさせたい場合<br>
<a href="#Section-1">Section-1にジャンプ</a></p>
<p>▼別のページからジャンプさせたい場合<br>
<a href="../html/a#Section-1" target="_blank" rel="noopener">Section-1にジャンプ</a></p>
<p>※リンクをクリックすると、一行目にジャンプ先が表示されます。</p>
<div>
<div id="Section-2">
<h5>Section-2です</h5>
<p>▼同一ページ内でジャンプさせたい場合<br>
<a href="#Section-2">Section-2にジャンプ</a></p>
<p>▼別のページからジャンプさせたい場合<br>
<a href="../html/a#Section-2" target="_blank" rel="noopener">Section-2にジャンプ</a></p>
<div>
Section-1です
リンクをクリックすると、一行目にジャンプ先が表示されます。
▼同一ページ内でジャンプさせたい場合
Section-1にジャンプ
▼別のページからジャンプさせたい場合
Section-1にジャンプ
Section-2です
リンクをクリックすると、一行目にジャンプ先が表示されます。
▼同一ページ内でジャンプさせたい場合
Section-2にジャンプ
▼別のページからジャンプさせたい場合
Section-2にジャンプ
title
属性でリンク先の案内や補足情報を追記することができます。マウスオーバーでツールチップを表示させますが、スマホなどのタブレット環境では機能しない点に注意して下さい。
<p>
マウスオーバーすると<a href="./" title="リンク先の案内や補足情報">title属性の内容</a>が表示されます。
</p>
<a>に関連するHTMLタグ
ハイパーリンクを作成する要素 | |
---|---|
<a> | リンクを指定する |
<area> | イメージマップの領域を指定する |
<map> | 一つの画像に対して複数のリンクを設定する |