<a>タグの解説
<a>は、特定の要素に対してハイパーリンクを設定します。ハイパーリンクは「アンカー要素」と表現されることもあります。ウェブページは、ドキュメント同士をリンクで繋いでワンクリックで移動できる特徴を持ちます。HTMLという名前が「ハイパーテキストをマークアップする言語」であることも、この機能の特徴を表しています。そういった意味でも、<a>要素はHTMLの中で特に重要な機能を備えたものであると言えます。
ハイパーリンクを指定する場合は、特定の範囲の文字列や要素を<a>〜</a>で囲います。リンクの指定範囲に含める情報は、文字列の他に画像や要素の集合です。そのリンクをクリックした時に、どのような場所へ移動し、どのような情報が得られるのか、事前に利用者が予想できるような設計を心がけましょう。
リンクの指定方法には、大きく分けて３つの手段があります。ひとつは、「http」から始まるドメイン全体を指す「絶対パス」。もうひとつは、参照元のドキュメントから同じサーバーの位置関係を表す「相対パス」。そして参照しているページの中を移動するページ内リンクです。詳しい内容は、「ハイパーリンクの解説」を参照して下さい。
<a>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果として文字の色が変わり、アンダーラインが引かれます。さらにマウスオーバーや訪問済みなどの状況によって効果が変化します。変更したい場合はスタイルシートで調整して下さい。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<a>要素に指定できる属性
href- リンク先のURLを指定します。メールアドレスや電話番号など、ブラウザが対応しているプロトコルの形式も使用できます。ウェブブラウザが特定のスキームに対応していない可能性がある場合は、
registerProtocolHandler()APIを使って解決します。 hreflang- リンク先のURLへの言語ヒントを与えます。指定する値は
lang属性と同じものです。 download- リンク先のURLをダウンロード・コンテンツとして扱います。ブラウザはファイルの拡張子によって自動的に判別するので省略可能です。
<a href="###" download>：理論値として扱う場合<a href="###" download="file/name">：ファイルを直接指定する場合
ping- リンクをクリックした時に
PING（POSTメソッドのリクエスト）を送信する値を指定します。ここにはPINGの送信先となるURLを空白区切りで記載します。例えば、URLにGETパラメーターを付加することなく、アクセスログの計測が行えます。 rel- この文書から見たリンク先との関係を指定します。
target属性を使用して新しいウィンドウを開く場合などは、セキュリティリスクを考慮した記述が求められます。 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で保護されたリソースから安全ではないオリジンに漏洩させます。
target- リンク先の内容を開く環境を制御します。
_self：同じウィンドウで開く（初期値）_blank：新しいタブまたは新しいウィンドウで開く_parent：親の閲覧コンテキストがある場合はそこで開く。ない場合は"_self"_top：最上位の閲覧コンテキストで開く。ない場合は"_self"
type- リンク先のURLのMIMEタイプに関するヒントを指定します。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<a>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。一般的には<a>要素でリンクを設置したい箇所を囲んで、href属性で移動先のURLを示します。
<a href="https://example.com">リンクする文字列</a>
本サイトのトップページへ移動する手段をユーザーに提供する場合、以下のように記述します。
<div>
リンクをクリックすると<a href="https://weblan3.com">サイトのトップページ</a>に戻ります。
</div>
画像にリンクを設定することもできます。
<a href="https://weblan3.com">
<img src="/images/logo.png" alt="Site Logo">
</a>
特定の要素全体をリンクにすることも可能です。CSSを使うと、ボタン風のデザインやラベル風のデザインに仕上げることができます。
<a href="###" class="sample-block">
<div class="item">
<h2 class="heading">heading</h2>
<p>body text</p>
</div>
</a>
リンク先URLの指定方法
リンクの指定方法には、いくつかの形式が用意されています。絶対パスと相対パスについて詳しく知りたい方は、ハイパーリンクの解説をご覧下さい。
// 絶対パス
<a href="https://weblan3.com/html/">絶対パス</a>
// 相対パス
<a href="./html">相対パス</a>
// ページ内リンク
<a href="#id-name">ページ内リンク</a>
ページ内の特定の場所に移動させたい場合は、href属性のURL末尾にハッシュタグ（#）を付けて、ジャンプ先の要素のid属性に記述した値と同じ文字列を追加します。
// 同じページ内の要素にリンク
<a href="#jump-id">#jump-idへ移動</a>
// 別のページの要素にリンク
<a href="page-name#jump-id">#jump-idへ移動</a>
// ジャンプ先のターゲット
<div id="jump-id">
#jump-idの内容
</div>
target属性の使い方
リンク先を別のウィンドウやタブで開きたい場合は、target属性を使います。外部ドメインのサイトを新しいウィンドウで開く場合は、セキュリティリスクを考慮してrel属性を追加しましょう。
// 同じタブで開く（初期値）
<a href="https://example.com" target="_self">Link</a>
// 新しいタブで開く
<a href="https://example.com" target="_blank">Link</a>
rel属性の使い方
rel属性は、リンク元のページとリンク先のページとの関係性を表します。同じドメイン内のページに移動する場合には意識しなくても問題ありませんが、自分が運営するサイトから外部のサイトへ移動する場合は考慮が必要です。
以下の内容は、よく使うリンクのrel属性の値です。場合によっては省略したり、複数の値を組み合わせることがあります。
// 著者のプロフィールやSNSへ移動する場合
<a href="URL" rel="author">Link</a>
// 外部サイトへ移動する場合
<a href="URL" rel="external">Link</a>
// リンク先のサイトを支持しない場合
<a href="URL" rel="nofollow">Link</a>
// 外部サイトへ移動する場合、発信元の文書を改ざんを防ぐ
<a href="URL" rel="noopener">Link</a>
// Refererヘッダー情報を発信したくない場合
<a href="URL" rel="noreferrer">Link</a>
// ページを分割した内容の続きへ移動する
<a href="URL" rel="next">Link</a>
// ページを分割した内容の前に戻る
<a href="URL" rel="prev">Link</a>
// 外部サイトへ移動する場合の組み合わせ
<a href="URL" target="_blank" rel="external noopener">Link</a>
// 信頼できないサイトをリンクする場合の使用例
<a href="URL" target="_blank" rel="external nofollow noopener noreferrer">Link</a>