HTML講座 / リンクの作成、相対パスとページ内移動

HTMLのリンクはa要素で作り、移動先をhref属性に書きます。別ページだけでなく、同じ文書の特定の場所、ファイル、メールアドレスなども指定できます。リンクの文章だけで行き先が分かるように書きます。

aとhrefでリンクを作る

次の例ではURLが行き先、タグの中の「HTML lists tutorial」が画面に表示されるリンク文です。このサンプルは既存の英語版リスト講座へ接続します。日本語で学ぶ場合はol・ul・dlの使い分けも参照できます。

<a href="https://www.codingfactory.net/en/15489">HTML lists tutorial</a>

hrefがないaは通常の移動用リンクではありません。仮の行き先として#を入れるとページ上部へ移動するなど、意図しない挙動になる場合があります。

絶対URLと相対URL

https://から始まる絶対URLはドメインを含みます。相対URLは、リンクを書く文書の場所を基準に解決されます。次は練習用のフォルダー構成で、Coding Factory上にこれらのファイルがあるという意味ではありません。

site/
  contact.html
  lessons/
    index.html
    about.html

<a href="https://www.codingfactory.net/en/15489">Full URL</a>
<a href="about.html">About page in this folder</a>
<a href="../contact.html">Contact page one folder up</a>
<a href="/en/15489">HTML lists on this site</a>

about.htmlは同じフォルダー、../contact.htmlは一つ上のフォルダーのファイルです。/から始まるパスはサイトのルート基準になります。ローカルのfile://と公開サーバーではルートの扱いが違うため、配置後にも確認します。

ページ内の場所へ移動する

移動先に文書内で一意のidを付け、リンクに#とその値を書きます。次の例ではcontactの綴りを一致させています。

<a href="#contact">Go to contact details</a>
<h2 id="contact">Contact</h2>
<p>Contact information goes here.</p>

別のファイルならabout.html#contactのようにURLへ追加します。同じIDが複数あると移動先の判断が曖昧になるため、使い回さないようにします。スクロールできたかだけでなく、目的の節へ移動したかを確認してください。

メールと新しいタブのリンク

mailto:は利用者のメールアプリへ作成を依頼します。クリックしただけでメールを送信するものではなく、利用可能なアプリの設定によっては期待通りに開かない場合もあります。

<a href="mailto:hello@example.com">Send an email</a>

外部サイトを新しいタブなどで開く場合はtarget="_blank"とrel="noopener noreferrer"を指定します。実際にタブかウィンドウかはブラウザーの設定にもよります。

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a"
   target="_blank" rel="noopener noreferrer">MDN's a element reference</a>

開き方が操作に影響する場合は、リンクの近くで新しいタブが開くことを伝えます。

download属性の条件

downloadはリンク先のファイルのダウンロードをブラウザーに要求します。次は同じサイトの画像を対象にした例です。

<a href="/wp-content/uploads/html-image-sample-lake-tree-1600-v1.webp" download>Download the example image</a>

通常は同一オリジンのURL、blob:、data:が対象です。他のサイトの一般的なURLに付ければ必ず保存させられるわけではありません。同一オリジンでもサーバーの応答やブラウザー設定に影響されるため、実際の配置先で確認します。詳しくはMDNのa要素を参照してください。

三つのファイルで相対パスを実習する

最初の構成どおりにフォルダーを作り、以下を順にsite/lessons/index.html、site/lessons/about.html、site/contact.htmlへ保存します。各コードは完全な文書なので、他の文書に入れ子にせずファイル全体として保存してください。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Path practice home</title>
</head>
<body>
  <h1>Path practice home</h1>
  <nav aria-label="Practice menu">
    <a href="about.html">About</a>
    <a href="../contact.html">Contact</a>
  </nav>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>About</title>
</head>
<body>
  <h1>About</h1>
  <nav aria-label="Practice menu">
    <a href="index.html">Practice home</a>
    <a href="../contact.html">Contact</a>
  </nav>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact</title>
</head>
<body>
  <h1>Contact</h1>
  <nav aria-label="Practice menu">
    <a href="lessons/index.html">Practice home</a>
    <a href="lessons/about.html">About</a>
  </nav>
</body>
</html>

各ファイルを開き、すべてのリンクをたどってアドレスのフォルダーを比較します。../は一階層上へ戻ります。失敗したらリンク元のファイルの場所から解決し直してください。試しに変えたパスは元に戻し、もう一度移動を確認します。

公開前のリンク確認

「こちら」だけでなく、行き先の内容が分かる文言にします。ファイル名の大文字・小文字や拡張子、相対位置、ページ内IDの一致を確認します。メールやダウンロードは環境依存の条件もあるため、通常のページ移動とは分けて試します。三つのページをサイトとして仕上げる手順は小さな複数ページサイトで扱います。