<a>
紹介
リンク（hyperlink）はインターネットの核となるものです。これにより、ユーザーはあるページから別のページへ、すべてのリソースを相互に接続することができます。
<a> タグは移動可能なリンクを表します。ページだけでなく、テキストや画像、ファイル、さらには現在のページの位置にまでリンクできます。言い換えれば、インターネット上のすべてのリソースは、<a> を通じてアクセスできます。
以下は典型的なリンクの例です。
<a href="https://wikipedia.org/">ウィキペディア</a>
上記のコードは、スーパーハイパーリンクを定義しています。ブラウザには「ウィキペディア」と表示され、テキストの下にデフォルトで下線が引かれ、これはリンクであることを示しています。ユーザーがクリックすると、ブラウザはhref属性で指定されたURLに移動します。
<a>タグの内部にはテキストだけでなく、段落、画像、マルチメディアなど他の要素も置くことができます。
<a href="https://www.example.com/">
<img src="https://www.example.com/foo.jpg">
</a>
上記のコードでは、<a>タグの内部に画像が含まれています。ユーザーが画像をクリックすると、指定されたURLに移動します。
属性
<a>タグには以下の属性があります。
href
href属性はリンク先のURLを示します。この値はURLまたはアンカーです。
完全なURLの例は前述しましたが、以下はアンカーの例です。
<a href="#demo">例</a>
上記のコードでは、href属性の値が#とアンカー名です。クリックすると、ブラウザは現在のページの中でdemoアンカーの位置に自動的にスクロールします。
hreflang
hreflang 属性はリンク先のページが使用している言語を示します。これは単なるヒントであり、実際の機能はありません。主に検索エンジンのためのものです。
<a
href="https://www.example.com"
hreflang="en"
>例のサイト</a>
上記のコードは、リンク先のURLの言語が英語であることを示しています。
あるリソースが複数の言語バージョンを持つ場合、hreflangをx-defaultに設定することで、どのリンクがデフォルトバージョンであるかを示すことができます。
<a href="https://example.com" hreflang="x-default">English</a>
<a href="https://example.com/de" hreflang="de">German</a>
上記の例では、hreflangをx-defalutに設定することで、このリンクがデフォルトバージョンであることを示しています。
hreflang 属性に使用される言語コードは、共通のlang 属性と同じであり、詳細は《属性》章のlang属性の紹介をご覧ください。
title
title属性はリンクに関する説明を示します。マウスをリンク上に置いた時に、ブラウザがこの属性の値をツールチップ形式で表示します。
<a
href="https://www.example.com/"
title="hello"
>例</a>
上記のコードでは、ユーザーがリンク上にマウスを置くと、helloというツールチップが表示されます。
target
target属性はリンクがどのように開かれるかを指定します。指定されたウィンドウや```で開くことも可能です。
<p><a href="http://foo.com" target="test">foo</a></p>
<p><a href="http://bar.com" target="test">bar</a></p>
上記のコードでは、2つのリンクがともにtestという名前のウィンドウで開かれます。最初にfooリンクをクリックすると、ブラウザはtestという名前のウィンドウがないことに気付き、新しいウィンドウを作成し、testという名前を付けてそのウィンドウにfoo.comを表示します。その後、ユーザーがbarリンクをクリックすると、既にtestウィンドウが存在するため、そのウィンドウにbar.comが表示され、既に開いているfoo.comが置き換えられます。
target属性の値には、以下の4つのキーワードのいずれかを指定することもできます。
_self：現在のウィンドウで開きます（デフォルト値）。_blank：新しいウィンドウで開きます。_parent：親ウィンドウで開きます。通常、親ウィンドウから開かれた子ウィンドウや<iframe>内のリンクで使用されます。現在のウィンドウに親ウィンドウがない場合、この値は_selfと同じです。_top：最上位のウィンドウで開きます。現在のウィンドウが最上位の場合、この値は_selfと同じです。
<a
href="https://www.example.com"
target="_blank"
>例のリンク</a>
上記のコードでは、クリックするとブラウザが新しいウィンドウを作成し、そのウィンドウでリンクを開きます。新しいウィンドウには名前がありません。
target属性を使用する際には、rel="noreferrer"も併用することをお勧めします。これにより、セキュリティリスクを回避できます。
rel
rel 属性は、リンクと現在のページの関係を説明します。
<a href="help.html" rel="help">ヘルプ</a>
上記のコードでは、rel 属性がリンクを現在のページのヘルプドキュメントであることを示しています。
以下は、よく使用されるrel属性の値です。
alternate：現在のドキュメントの別の形式（例：翻訳）。author：著者へのリンク。bookmark：ブックマークとして使用される永続的なアドレス。external：現在のドキュメントの外部参照。help：ヘルプリンク。license：ライセンスリンク。next：シリーズ文書の次のページ。nofollow：検索エンジンにリンクを無視するように指示するためのもの。ユーザーが提出したコンテンツに使用され、検索ランキングを不正に上げるリンクを防ぐため。noreferrer：リンクを開いたときに、現在のURLをHTTPヘッダーのRefererフィールドとして送信しないようブラウザに指示する。これにより、クリック元を隠すことができる。noopener：リンクウィンドウがJavaScriptのwindow.openerプロパティを通じて元のウィンドウを参照できないようにブラウザに指示し、セキュリティを強化する。prev：シリーズ文書の前のページ。search：文書の検索リンク。tag：文書のタグリンク。
referrerpolicy
referrerpolicy属性は、リンクをクリックしたときにブラウザが送信するHTTPヘッダーのRefererフィールドの動作を正確に設定するために使用されます。
この属性は次の8つの値を取ることができます：no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url、same-origin、strict-origin、strict-origin-when-cross-origin。
その中で、no-referrerはRefererフィールドを送信しないことを意味し、same-originは同じオリジンの場合のみRefererフィールドを送信し、originはソース情報（プロトコル+ドメイン+ポート）だけを送信します。他の項目の説明については、HTTPドキュメントを参照してください。
ping
ping属性は、ユーザーがクリックしたときに、指定したURLにPOSTリクエストを送信するために使用され、通常はユーザーの行動を追跡するために使用されます。
<a href="http://localhost:3000/other" ping="http://localhost:3000/log">
別のページへ
</a>
上記の例では、ユーザーがリンクをクリックすると、リダイレクトが行われるだけでなく、http://localhost:3000/logにもPOSTリクエストが送信されます。サーバーがこのリクエストを受け取ると、ユーザーがこのリンクをクリックしたことが分かります。
このリクエストのHTTPヘッダーには、ping-from属性（クリック行動が発生したページ）とping-to属性（href属性が指すページ）が含まれます。
headers: {
'ping-from': 'http://localhost:3000/',
'ping-to': 'http://localhost:3000/other'
'content-type': 'text/ping'
// ...other headers
},
注意点として、ping属性はリンクに対してのみ有効であり、ボタンのクリックやフォームの送信などの他のインタラクションには無効です。また、Firefoxブラウザはこの属性をサポートしていません。さらに、カスタムデータを送信することもできません。
type
type属性は、リンクURLのMIMEタイプを示します。例えば、それがウェブページなのか、画像なのか、ファイルなのかを指定します。この属性は純粋にヒント的なもので、実際の機能はありません。
<a
href="smile.jpg"
type="image/jpeg"
>サンプル画像</a>
上記のコードでは、type属性はこれは画像であることを示しています。
download
download属性は、現在のリンクがダウンロード用であり、別のURLへのリダイレクトではないことを示します。
<a href="demo.txt" download>ダウンロード</a>
上記のコードをクリックすると、ダウンロードダイアログが表示されます。
注意点として、download属性はリンクとURLが同じオリジンの場合にのみ有効です。つまり、リンクは同じウェブサイトに属している必要があります。
もしdownload属性に値が設定されている場合、その値はダウンロードするファイル名になります。
<a
href="foo.exe"
download="bar.exe"
>クリックしてダウンロード</a>
上記のコードでは、ダウンロードファイルの元のファイル名はfoo.exeです。クリック後、ダウンロードダイアログに表示されるファイル名はbar.exeです。
注意点として、リンクをクリックした後、サーバーのHTTPレスポンスヘッダーがContent-Dispositionフィールドを設定し、そのフィールドの値がdownload属性と一致しない場合、そのフィールドが優先され、ダウンロード時に設定されたファイル名が表示されます。
download属性にはもう一つの用途があります。それは、一部のアドレスが実際のURLではなくデータURLである場合、例えばdata:から始まるURLです。この場合、download属性は仮想URLにダウンロードファイル名を指定できます。
<a href="data:,Hello%2C%20World!">クリック</a>
上記のリンクをクリックすると、仮想ウェブページが開き、Hello World!が表示されます。
<a
href="data:,Hello%2C%20World!"
download="hello.txt"
>クリック</a>
上記のリンクをクリックすると、ダウンロードされたhello.txtファイルの内容は「Hello, World!」になります。
メールリンク
リンクはメールアドレスを指すこともでき、mailtoプロトコルを使用します。ユーザーがクリックすると、ブラウザがデフォルトのメールプログラムを開き、指定したアドレスにメールを送信できます。
<a href="mailto:contact@example.com">お問い合わせ</a>
上記のコードでは、リンクはメールアドレスを指します。クリックすると、ブラウザがメールアドレスを開き、contact@example.comにメールを送信できるようになります。
メールアドレスの他に、メールプロトコルでは他のいくつかのメール要素を指定することもできます。
subject：件名cc：Ccbcc：Bccbody：メール本文
使い方は、これらのメール要素をクエリ文字列の形式でメールアドレスの後に追加します。
<a
href="mailto:foo@bar.com?cc=test@test.com&subject=The%20subject&body=The%20body"
>メールを送信</a>
上記のコードでは、メールリンクにはメールアドレスだけでなく、cc、subject、bodyなどのメール要素も含まれています。これらの要素の値はURLエンコードされる必要があります。例えば、空白は%20に変換されます。
メールアドレスを指定しないことも可能で、次のようになります。この場合、ユーザーはメールプログラムで送信したいメールアドレスを自分で入力します。通常はウェブページを友人と共有するために使用されます。
<a href="mailto:">友達に知らせる</a>
電話リンク
モバイルでブラウジングしているページでは、telプロトコルを使用して電話リンクを作成できます。ユーザーがこのリンクをクリックすると、電話が起動し、ダイヤルすることができます。
<a href="tel:13312345678">13312345678</a>
上記のコードでは、モバイルでリンクをクリックするとダイヤル画面が表示され、指定された番号を直接ダイヤルできます。
作者: wangdoc
アドレス: https://wangdoc.com/
ライセンス: クリエイティブ・コモンズ 3.0