リンク

属性の概要では、開始タグに属性を追加する方法の例を紹介しました。この例では <a> タグを使用しましたが、この例で導入された要素も特定の属性も説明されていません。

<a> アンカータグと href 属性により、ハイパーリンクが作成されます。リンクはインターネットのバックボーンです。最初のウェブページには 25 個のリンクが含まれており、「W3 に関するオンライン上のすべての情報は、直接的または間接的にこのドキュメントにリンクされている」と書かれていました。おそらく、W3 に関するオンラインのすべての情報も、このドキュメントから直接的または間接的にリンクされています。

Tim Berners-Lee が 1991 年 8 月にこの最初の説明を公開して以来、ウェブの力と <a> タグは大きく成長しました。リンクは、2 つのリソース間の接続を表します。そのうちの 1 つは現在のドキュメントです。リンクは、<a>、<area>、<form>、<link> で作成できます。<link> についてはすでに学習しました。フォームについては、別のセクションで説明します。フォームの学習セクション全体もあります。このセッションでは、1 文字の <a> タグについて説明します。

href 属性

必須ではありませんが、href 属性はほぼすべての <a> タグにあります。ハイパーリンクのアドレスを指定することで、<a> がリンクになります。href 属性は、現在のページ内の場所、サイト内の他のページ、または他のサイトへのハイパーリンクを作成するために使用されます。また、ファイルをダウンロードしたり、特定のメールアドレスにメールを送信したりするようにコード化することもできます。件名やメールの本文の候補を含めることも可能です。

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

最初のリンクには絶対 URL が含まれており、世界中のどのサイトでも MLW のホームページに移動するために使用できます。絶対 URL には、プロトコル（この場合は https://）とドメイン名が含まれます。プロトコルが // と記述されている場合、それは暗黙的なプロトコルであり、「現在アクティブに使用されているものと同じプロトコルを使用する」という意味です。

相対 URL にはプロトコルやドメイン名が含まれていません。現在のファイルに対する「相対」パスです。MLW は 1 ページのサイトですが、この HTML シリーズには複数のセクションがあります。このページから属性のレッスンにリンクするために、相対 URL <a href="../attributes/">Attributes</a> が使用されています。

2 つ目のリンクは単なるリンク フラグメント識別子であり、現在のページに id="teachers", を持つ要素があれば、その要素にリンクします。ブラウザは「ページの先頭」へのリンクも 2 つサポートしています。<a href="#top">Top</a>（大文字と小文字を区別しない）または <a href="#">Top</a> をクリックすると、同じ文字ケースで top の ID が設定された要素がない限り、ユーザーはページの先頭に戻ります。

MLW はかなり長いドキュメントです。スクロールを減らすため、#teachers セクションの下部から上部に戻るリンクを追加できます。

<a href="#top">Go to top.</a>

3 番目のリンクは 2 つの値を組み合わせたもので、絶対 URL の後にリンク フラグメントが続きます。これにより、定義された URL のセクション（この場合は MLW ホームページの #teachers セクション）に直接リンクできるようになります。MLW ページが読み込まれ、ブラウザが教師セクションまでスクロールします。このとき、HTTP リクエストでフラグメントは送信されません。

href 属性は、mailto: または tel: で始まり、メールを送信したり電話をかけたりできます。リンクの処理は、デバイス、オペレーティング システム、インストールされているアプリによって異なります。

mailto リンクにメールアドレスを含める必要はありませんが、cc、bcc、subject、body のテキストとともに含めることで、メールを事前入力できます。デフォルトでは、メール クライアントが開きます。メールの件名と本文にメールアドレスを事前入力しないことで、サイト訪問者が自分の友だちを招待できるようにすることができます。ドキュメントのフッターにあるリンクには、登録の URL が含まれています。

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

疑問符（?）は、mailto: とメールアドレス（ある場合）をクエリキーワードから区切ります。クエリ内では、アンパサンド（&）でフィールドを区切り、等号（=）で各フィールド名とその値を関連付けます。文字列全体がパーセント エンコードされます。これは、href 値が引用符で囲まれていない場合や、値に引用符が含まれている場合に必要です。

ユーザーが tel リンクをクリック、タップ、または Enter キーを押したときに開くアプリは、オペレーティング システム、インストールされているアプリ、デバイスのユーザー設定によって異なります。iPhone で FaceTime、電話アプリ、連絡先が開くことがあります。Windows デスクトップで Skype がインストールされている場合は、Skype が開くことがあります。

他にも、BLOB やデータ URL など、さまざまな種類の URL があります（download 属性の議論の例を参照）。安全なサイト（https 経由で配信されるサイト）では、registerProtocolHandler() を使用してアプリ固有のプロトコルを作成して実行できます。

インストール済みの他のアプリを開く可能性のあるリンクを含める場合は、ユーザーに知らせることをおすすめします。開始タグと終了タグの間のテキストで、ユーザーがアクティブにしようとしているリンクの種類をユーザーに伝えるようにしてください。[href^="mailto:"]、[href^="tel:"]、[href$=".pdf"] などの CSS 属性セレクタを使用して、アプリケーション タイプ別にスタイルをターゲットにできます。

ダウンロード可能なリソース

href がダウンロード可能なリソースを指している場合は、download 属性を含める必要があります。download 属性の値は、ユーザーのローカル ファイル システムに保存されるリソースの推奨ファイル名です。SVGOMG（SVG オプティマイザー）は、download 属性を使用して、オプティマイザーが作成するダウンロード可能な BLOB のファイル名を提案します。hal.svg が最適化されると、SVGOMG のダウンロード リンクの開始タグは次のようになります。

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

ダウンロード可能な PNG データ URL を作成する <canvas> のデモもあります。

ダウンロード可能なリソースにリンクするには、アセットの URL を href 属性の値として、ユーザーに推奨するファイル名を download 属性の値として含めます。

ブラウジング コンテキスト

target 属性を使用すると、リンク ナビゲーション（およびフォームの送信）のブラウジング コンテキストを定義できます。大文字と小文字を区別しない、アンダースコア接頭辞付きの 4 つのキーワードについては、<base> 要素で説明しました。これには以下が該当します。

• （デフォルト）_self: 現在のウィンドウでリンクを開きます。
• _blank: 新しいタブでリンクを開きます。
• _parent: 親オブジェクトまたは iframe でリンクを開きます。
• _top: 最上位の祖先でリンクを開きます。これは、リンクが深くネストされている場合に特に便利です。

リンクがネストされていない場合、_top と _parent は _self と同じように動作します。target 属性は、これらの 4 つのキーワードに限定されません。任意の用語を使用できます。

すべてのブラウジング コンテキスト（またはすべてのブラウザタブ）にはブラウジング コンテキスト名があります。リンクは、現在のタブ、名前のない新しいタブ、名前付きの新しいタブまたは既存のタブで開くことができます。デフォルトでは、名前は空の文字列です。

リンクを新しいタブで開くには、右クリックして [新しいタブで開く] を選択します。デベロッパーは、target="_blank" を含めることでこれを強制できます。

target="_blank" を含むリンクは、名前のない新しいタブで開きます。リンクをクリックするたびに、名前のない新しいタブが開きます。これにより、多くの新しいタブが作成される可能性があります。タブが多すぎます。たとえば、ユーザーが <a href="registration.html" target="_blank">Register Now</a> を 15 回クリックすると、登録フォームが 15 個の別々のタブで開きます。この問題は、タブ コンテキスト名を指定することで解決できます。target 属性に大文字と小文字が区別される値（<a href="registration.html" target="reg">Register Now</a> など）を含めることで、最初のクリックで登録フォームが新しい reg タブで開きます。このリンクをさらに 15 回クリックすると、追加のタブを開くことなく、reg ブラウジング コンテキストで登録が再読み込みされます。

rel 属性は、リンクが作成するリンクの種類を制御し、現在のドキュメントとハイパーリンクでリンクされているリソースの関係を定義します。属性の値は、<a> タグでサポートされている rel 属性値のスコアの 1 つ以上のスペース区切りリストである必要があります。

スパイダーにリンクをたどってほしくない場合は、nofollow キーワードを含めることができます。external 値を追加して、リンクが外部 URL に移動し、現在のドメイン内のページではないことを示すことができます。help キーワードは、ハイパーリンクがコンテキストに応じたヘルプを提供することを示します。この rel 値を持つリンクにカーソルを合わせると、通常のポインタ カーソルではなくヘルプ カーソルが表示されます。ヘルプ カーソルを取得するためだけにこの値を使用しないでください。代わりに CSS の cursor プロパティを使用してください。prev と next の値は、シリーズ内の前後のドキュメントを指すリンクで使用できます。

<link rel="alternative"> と同様に、<a rel="alternative"> の意味は他の属性によって異なります。RSS フィードの代替には type="application/rss+xml" または type="application/atom+xml も含まれ、代替形式には type 属性が含まれ、翻訳には hreflang 属性が含まれます。開始タグと終了タグの間のコンテンツがメインのドキュメント言語以外の言語である場合は、lang 属性を含めます。ハイパーリンクされたドキュメントの言語が異なる場合は、hreflang 属性を含めます。

この例では、翻訳されたページの URL を href の値として含め、rel="alternate" を使用してサイトの代替バージョンであることを示しています。hreflang 属性は翻訳の言語を指定します。

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

フランス語の翻訳が PDF の場合は、リンクされたリソースの PDF MIME タイプで type 属性を指定できます。MIME タイプはあくまでも参考情報ですが、リンクを開くと別の形式のドキュメントが開くことをユーザーに知らせることは常に良いことです。

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

リンクのクリック数をトラッキングする

ユーザー インタラクションをトラッキングする方法の 1 つは、リンクがクリックされたときに URL を ping することです。ping 属性が存在する場合、ユーザーがハイパーリンクを有効にしたときに通知または ping を行う必要があるセキュア URL（https で始まる）のスペース区切りのリストが含まれます。ブラウザは、本文 PING を含む POST リクエストを、ping 属性の値としてリストされている URL に送信します。

ユーザー エクスペリエンスに関するヒント

• HTML を記述する際は、常にユーザー エクスペリエンスを考慮してください。リンク先のリソースについて十分な情報を提供し、ユーザーがクリックする内容を把握できるようにする必要があります。
• テキスト ブロック内では、リンクの見た目が周囲のテキストと十分に異なるようにして、ユーザーがリンクを他のコンテンツと区別しやすくする必要があります。色や下線など、複数の視覚的指標を使用します。色だけでは十分ではありません。
• フォーカス スタイルは常に含めてください。これにより、キーボード ナビゲーションを使用しているユーザーは、コンテンツをタブで移動する際に現在位置を把握できます。
• 開始 <a> と終了 </a> の間のコンテンツは、リンクのデフォルトのアクセシブルな名前であり、リンクの宛先または目的をユーザーに知らせる必要があります。リンクのコンテンツが画像の場合、alt の説明がアクセス可能な名前になります。リンクテキストと alt テキストは、「こちらをクリック」や「詳細」よりも説明的なものにする必要があります。代わりに、リンクがアクティブ化されたときにユーザーがどこに移動するのかに関する情報を提供する必要があります。これは、スクリーン リーダーのユーザーと検索エンジンの結果にとって非常に重要です。
• <button> や <input> などのインタラクティブなコンテンツをリンク内に含めないでください。<button> または <label> 内にリンクをネストしないでください。HTML ページは引き続きレンダリングされますが、フォーカス可能でクリック可能な要素をインタラクティブな要素内にネストすると、ユーザー エクスペリエンスが低下します。
• href 属性が存在する場合、<a> 要素にフォーカスがある状態で Enter キーを押すと、その要素がアクティブになります。
• リンクは HTML に限定されません。a 要素は SVG 内でも使用でき、'href' 属性または 'xlink:href' 属性のいずれかを使用してリンクを形成します。

リンクと JavaScript

links 属性は、href 属性を持つ a 要素と area 要素に一致する HTMLCollection を返します。

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

このセクションでは、リンクについて説明しました。次のセクションでは、リンクのリスト（ナビゲーションとも呼ばれます）を作成するために必要なリストについて説明します。

理解度を確認する

リンクに関する知識をテストします。