リンク

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

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

1991 年 8 月に Tim Berners-Lee がこの最初の説明を発表して以来、ウェブと <a> タグは目覚ましい進化を遂げています。 リンクは 2 つのリソース間の接続を表し、一方が現在のドキュメントです。リンクは、<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 が含まれています。この URL を使用すると、世界中のどのサイトでも MLW のホームページに移動できます。絶対 URL には、プロトコル（この場合は https://）とドメイン名が含まれます。プロトコルを単に // と記述すると暗黙的なプロトコルとなり、「現在使用されているプロトコルと同じものを使用する」ことを意味します。

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

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

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 のテキストとともにメールアドレスを含めることもできます。デフォルトでは、メール クライアントが開きます。メールアドレスなしでメールの件名と本文を事前に入力し、サイト訪問者が自分の友だちを招待できるようにすることもできます。Google のリンクでは、ドキュメントのフッターに登録への 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、電話アプリ、連絡先が開くことがあります。 Skype がインストールされている場合は、Windows デスクトップで Skype を開くことがあります。

URL には、blob やデータ URL など、他にもいくつかの種類があります（download 属性の説明の例をご覧ください）。セキュアサイト（https を介して配信されるサイト）の場合、registerProtocolHandler() を使用してアプリ固有のプロトコルを作成して実行できます。

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

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

href がダウンロード可能なリソースを指す場合は、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、現在のリンクがオブジェクトまたは iframe にネストされている場合は親 _parent、最上位の祖先である _top があります（現在のリンクが深くネストされている場合に特に役立ちます）。リンクがネストされていない場合、_top と _parent は _self と同じになります。target 属性は、この 4 つの主要用語に限定されるものではなく、任意の用語を使用できます。

すべてのブラウジング コンテキスト（基本的にすべてのブラウザタブ）には、ブラウジング コンテキスト名があります。リンクは、現在のタブ、名前のない新しいタブ、新規または既存の名前付きタブで開くことができます。デフォルトでは、名前は空の文字列です。リンクを新しいタブで開くには、右クリックして [新しいタブで開く] を選択します。デベロッパーは target="_blank" を含めることで、強制的に設定できます。

target="_blank" とのリンクは、新しいタブで null 名で開かれ、リンクがクリックされるたびに名前のない新しいタブが開きます。これにより、多数の新しいタブが作成される可能性があります。タブが多すぎます。たとえば、ユーザーが <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> タグでサポートされる 1 つ以上の rel 属性値のスコアをスペース区切りリストで指定します。

スパイダーにリンクをたどらせたくない場合は、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 属性を含めます。

この例では、href の値として、翻訳されたページの URL を含めています。また、サイトの代替バージョンであることを示すために 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

このセクションでは、リンクについて学習しました。次のセクションではリストについて説明します。リストをグループ化してリンクのリスト（ナビゲーションともいいます）を作成できます。

理解度チェック

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