実行できるHTMLドキュメント: HTML リンク

Q: HTML でリンクを作るには？

アンカー要素を使います: Example 。href がリンク先で、タグの間のテキストが読み手のクリックする部分です。

Q: href は何の略ですか？

Hypertext reference の略です。リンク先の URL を持ちます。完全なアドレス、/about のような同じサイト内のパス、#pricing のようなページ内のセクション、mailto: のようなスキームを指定できます。

Q: ページの特定の位置にリンクするには？

リンク先の要素に id を付け、ハッシュでリンクします: FAQ と FAQ 。別のページからなら、URL にハッシュを付けます: 。

Q: www から書くとリンクが別のページに飛ぶのはなぜですか？

https:// がないと、ブラウザは www.example.com を自分のサイト上の相対パスとして扱うので、yoursite.com/www.example.com のような場所に飛びます。外部リンクには必ずスキームを書きましょう: href="https://www.example.com"。

Q: a タグの中に div を入れられますか？

入れられます。HTML5 では で 、見出し、段落などのブロックの内容を囲めます。カード全体をリンクにするときはこの方法を使います。ただし、別のリンク、ボタン、その他の操作できる要素は入れられません。

HTML でリンクを作る方法

リンクは href 属性を持つアンカー要素 <a> です。href はリンク先で、タグの間の内容が読み手のクリックする部分です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <p>
    Read the <a href="https://developer.mozilla.org/">MDN web docs</a>
    or go back to the <a href="/">home page</a>.
  </p>
  <p>This is <a>an anchor with no href</a>: it is not a link.</p>
</body>
</html>

ブラウザはリンクを青い下線付きで表示し、カーソルを手の形に変えます。最後の行は href が重要な理由を示しています。href がないと <a> はただのテキストです。フォーカスできず、クリックもできず、リンクのスタイルも付きません。

絶対 URL と相対 URL

href の値でリンク先が決まります。主な形は次のとおりです。

`href`	リンク先
`https://example.com/page`	絶対 URL: そのアドレスそのもの
`/about`	現在のサイトのルートにある `about`
`about.html`	現在のページと同じフォルダにある `about.html`
`../index.html`	1 つ上のフォルダにある `index.html`
`#pricing`	このページの `id="pricing"` を持つ要素
`/help#faq`	このサイトの別のページの `faq` セクション
`mailto:hi@example.com`	読み手のメールアプリで新規メールを作成
`tel:+15551234567`	電話をかけられる端末で電話をかける

他のサイトには絶対 URL を、自分のサイト内ではルートからのパス (/about) を使いましょう。リンクを含むページが別のフォルダに移っても動き続けます。

<a href="https://www.wikipedia.org/">Wikipedia</a>  <!-- another site -->
<a href="/pricing">Pricing</a>                     <!-- same site, from the root -->
<a href="www.wikipedia.org">Broken</a>              <!-- relative path, not a site! -->

最後の行は最もよくあるリンクの不具合です。https:// がないと、ブラウザは www.wikipedia.org を現在のフォルダにあるファイル名として読みます。

メールと電話のリンクには専用のページがあります: HTML のメールリンク。

ページ内の特定の位置へのリンク

id を持つ要素はすべてリンク先になります。# の後に id を続けてリンクすると、ブラウザがそこまでスクロールします。プレビューのリンクをクリックしてみてください。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Anchor links</title>
  <style>
    section { min-height: 220px; padding: 8px; border-top: 2px solid #e5e7eb; }
    :target { background: #fef3c7; }
  </style>
</head>
<body>
  <nav>
    <a href="#install">Install</a> |
    <a href="#usage">Usage</a> |
    <a href="#faq">FAQ</a>
  </nav>

  <section id="install"><h2>Install</h2></section>
  <section id="usage"><h2>Usage</h2></section>
  <section id="faq">
    <h2>FAQ</h2>
    <a href="#top">Back to top</a>
  </section>
</body>
</html>

細かい点をいくつか挙げます。

id は大文字と小文字も含めて完全に一致する必要があります。href="#FAQ" では id="faq" は見つかりません。
href="#top" と href="#" は、id が top の要素がなくてもページの先頭までスクロールします。
:target セレクタは、URL が現在指しているセクションにスタイルを付けます。実際のページではハイライトされますが、プレビューはアドレスを変えずにスクロールするので、ここではハイライトされません。
別のページのセクションにリンクするには、そのページの URL にハッシュを付けます: <a href="/docs/html/table#caption">。

固定ヘッダーの下でのページ内リンク

sticky や fixed のヘッダーがあると、移動先のセクションの上部が隠れます。移動先に scroll-margin-top を指定するとその分の余白が空き、scroll-behavior: smooth で移動がなめらかになります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    header {
      position: sticky;
      top: 0;
      padding: 12px 16px;
      background: #111827;
    }
    header a { color: #fff; margin-inline-end: 12px; }
    h2 { scroll-margin-top: 60px; margin: 0; padding: 8px 16px; background: #e5e7eb; }
    p { height: 320px; margin: 0; padding: 16px; }
  </style>
</head>
<body>
  <header>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
  </header>
  <h2 id="one">Section one</h2>
  <p>Content</p>
  <h2 id="two">Section two</h2>
  <p>Content</p>
  <h2 id="three">Section three</h2>
  <p>Content</p>
</body>
</html>

scroll-margin-top の行を消してもう一度 Two をクリックすると、見出しが暗いヘッダーの裏に隠れます。

ダウンロードリンク

download 属性を付けると、ブラウザはファイルを開かずに保存します。値を指定すると、それが保存時のファイル名の候補になります。

<a href="/files/report-2026.pdf" download>Download the report</a>
<a href="/files/r-8f2a.pdf" download="report.pdf">Download (saved as report.pdf)</a>

download が効くのは、ページと同じオリジン (スキーム、ホスト、ポートが同じ) にあるファイルと、data: や blob: の URL だけです。サブドメインも含め、別のオリジンにあるファイルではブラウザは属性を無視し、普通のリンクとしてファイルに移動します。サーバー側で Content-Disposition: attachment ヘッダーを送れば、どのファイルでもダウンロードさせられます。

意味の伝わるリンクテキスト

スクリーンリーダーの利用者は、リンクからリンクへ移動し、リンクテキストだけを聞くことがよくあります。「ここをクリック」や「続きを読む」では何も伝わりません。

<!-- Vague: -->
To see our prices, <a href="/pricing">click here</a>.

<!-- Clear: -->
See the <a href="/pricing">pricing plans</a>.

title 属性はマウスを重ねるとツールチップを表示しますが、タッチ画面でもほとんどのキーボード操作でも表示されないので、重要なことは書かないでください。

カード全体をリンクにする

<a> はブロックの内容を囲めるので、見出し、画像、段落をまとめて 1 つのリンクにできます。クリックできるカードはこの方法で作ります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .card {
      display: block;
      max-width: 280px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      color: #111827;
      text-decoration: none;
    }
    .card:hover { border-color: #2563eb; }
    .card h3 { margin: 0 0 6px; color: #2563eb; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <a class="card" href="https://developer.mozilla.org/">
    <h3>MDN web docs</h3>
    <p>Reference pages for HTML, CSS and JavaScript.</p>
  </a>
</body>
</html>

display: block を指定すると、テキストだけでなく箱全体がクリックできるようになります。スクリーンリーダーはカードの内容をすべてリンク名として読み上げるので、内容は短くしましょう。また、中に別のリンクやボタンを入れてはいけません。操作できる要素は <a> の中に入れ子にできません。

a タグのその他の属性

属性	働き
`href`	リンク先。これがないと `<a>` はリンクではない
`target`	開く場所。`target="_blank"` で新しいタブで開く。リンクを別タブで開くを参照
`rel`	リンク先との関係: `noopener`、`nofollow`、`sponsored`、`ugc`
`download`	ファイルを開かずに保存する
`hreflang`	リンク先のページの言語 (ヒントとして)
`referrerpolicy`	現在の URL をどこまでリファラーとして送るか

よくある間違い

外部 URL にスキームがない。 href="www.site.com" は相対パスです。https:// を書きましょう。
JavaScript の動作に <a href="#"> を使う。 ページの先頭にスクロールし、URL に # が付きます。クリックしてもどこにも移動しないなら <button> を使いましょう。
リンクの中にリンクやボタンを入れる。どちらも無効な HTML です。2 つ目の <a> があるとパーサーは 1 つ目を途中で閉じ、リンクの中のボタンをクリックすると何が対象なのかがあいまいになります。
ファイル名に空白を使う。 href="my file.html" はブラウザが空白をエンコードするので普通は動きますが、my-file.html にしておけば問題自体が起きません。
リンクテキストに「ここをクリック」と書く。 代わりにリンク先を説明しましょう。
id の大文字と小文字が一致しない。 #Pricing と id="pricing" は別物です。

よくある質問

HTML でリンクを作るには？

アンカー要素を使います: <a href="https://example.com">Example</a>。href がリンク先で、タグの間のテキストが読み手のクリックする部分です。

href は何の略ですか？

Hypertext reference の略です。リンク先の URL を持ちます。完全なアドレス、/about のような同じサイト内のパス、#pricing のようなページ内のセクション、mailto: のようなスキームを指定できます。

ページの特定の位置にリンクするには？

リンク先の要素に id を付け、ハッシュでリンクします: <h2 id="faq">FAQ</h2> と <a href="#faq">FAQ</a>。別のページからなら、URL にハッシュを付けます: <a href="/help#faq">。

www から書くとリンクが別のページに飛ぶのはなぜですか？

https:// がないと、ブラウザは www.example.com を自分のサイト上の相対パスとして扱うので、yoursite.com/www.example.com のような場所に飛びます。外部リンクには必ずスキームを書きましょう: href="https://www.example.com"。

a タグの中に div を入れられますか？

入れられます。HTML5 では <a> で <div>、見出し、段落などのブロックの内容を囲めます。カード全体をリンクにするときはこの方法を使います。ただし、別のリンク、ボタン、その他の操作できる要素は入れられません。