リンク

HTMLのHはハイパーテキスト、つまりほかのテキストにつながるテキストを表します。ウェブ上のすべてのリンクは、a という一つの要素でつくられています。

アンカー要素

リンクは、アンカー（anchor）を略した <a> 要素でつくります。href 属性に移動先のアドレスを書き、内容がクリックする文字になります。<a href="https://developer.mozilla.org/">MDN Web Docs</a> では、MDN Web Docsという文字に下線がついて表示され、それを選ぶとそのアドレスが読みこまれます。リンクはマウスでも、指でも、キーボードでも使えます。Tabを押すとリンクからリンクへ移り、Enterでリンク先に進みます。href がない <a> はただの仮置きで、Tabでたどり着けません。

絶対アドレスと相対アドレス

絶対URLには、スキーム（https:）、ドメイン、パスがすべて入っています。たとえば https://example.com/menu/bread.html です。ほかのサイトへのリンクに使います。相対URLは、今のページと同じ部分を省きます。https://example.com/menu/index.html のページでは、リンク bread.html は同じフォルダーのファイル、../about.html は一つ上のフォルダー、/contact.html はサイトのルートから始まるアドレスを表します。相対リンクは、サイト全体が新しいドメインに移っても動き続けます。

<a href="https://www.w3.org/">W3C</a>          <!-- another site -->
<a href="bread.html">Bread</a>                <!-- same folder -->
<a href="../about.html">About us</a>          <!-- one folder up -->
<a href="#hours">Opening hours</a>           <!-- same page -->
<a href="mailto:hello@example.com">Email us</a>

<h2 id="hours">Opening hours</h2>

同じページの中のリンク

どの要素にも id をつけられます。href がハッシュ記号とそのidになっているリンクは、その要素へすぐに移動します。<a href="#hours"> は <h2 id="hours"> までスクロールします。idはページの中で一つだけでなければならず、空白を含めません。長い記事では目次にこれを使い、多くのサイトはページのいちばん上にスキップリンク（「本文へスキップ」）を置いて、キーボードの利用者がどのページでもメニュー全体をTabでたどらずにすむようにしています。

メール、電話、ダウンロード

ほかのスキームは、ほかのプログラムを開きます。mailto:hello@example.com は訪問者のメールソフトで新しいメールを開き、tel:+82212345678 はスマートフォンでその番号に電話をかけるかどうかたずねます。リンクに download 属性を加えると、ファイルを開くのではなく保存するようブラウザーに求めます。こうしたリンクは便利ですが、メールソフトが突然開くとは思っていない人が多いので、何が起こるかをリンクの文字に書きましょう。

新しいタブと、よいリンクの文字

target="_blank" はリンクを新しいタブで開きます。使うのはひかえめにしましょう。訪問者から操作の主導権をうばい、「戻る」ボタンでもとのページにもどれなくなります。使うときは、たとえば「（新しいタブで開きます）」のようにリンクの文字に書いておきます。何より大切なのは、リンクの文字そのものです。スクリーンリーダーの利用者は、ページのリンクをすべて一覧にすることがよくあります。十個の項目がどれも「こちらをクリック」や「続きを読む」では、何もわかりません。前後の文がなくても意味が通じる文字にしましょう。「こちらをクリック」ではなく「2026年の時刻表をダウンロード」です。

ブラウザーは初期設定でリンクに下線をつけて青くし、訪れたことのあるリンクは紫で表示します。CSSでリンクの見た目を変えられますが、色の区別がつきにくい人にもどの語がリンクかわかるように、下線など色以外の手がかりを残しておきましょう。リンクにキーボードのフォーカスがあるとき、ブラウザーはそのまわりにフォーカスリングを描きます。はっきりした代わりを用意せずに、このリングを消してはいけません。