HTML aタグのリンクの書き方｜target=_blank・ページ内リンク

aタグ（a要素）とは、href 属性に書いた行き先へ移動できる「リンク」を作るHTMLのタグです。 行き先には、別のページのURLだけでなく、同じページ内の位置（#id名）、メールアドレス（mailto:）、電話番号（tel:）、ダウンロードさせたいファイルも指定できます。

この記事では、用途別にそのままコピペできる書き方を先にまとめ、そのあとで「target="_blank" に rel="noopener" は必要か」「固定ヘッダーで見出しが隠れるときはどうするか」といった判断に迷いやすい点を、Chromium 141 で実際に動かした結果と HTML 仕様の記述をもとに整理します。rel 属性の値の早見表、検証ツールが出すメッセージの原文も載せました。

aタグのリンクの早見表

やりたいことから書き方を選べます。

aタグの基本の書き方

リンクは「開始タグ＋リンクの文字＋終了タグ」で書き、行き先を href 属性に入れます。

<a href="https://example.com/">公式サイトを見る</a>

よく使う属性の一覧

絶対URLと相対URLの書き分け

href には、https:// から始まる絶対URLのほか、いまのページを基準にした相対URLも書けます。いまのページが https://example.com/dir/a.html のとき、それぞれの書き方がどのURLになるかを、ブラウザと同じ規則で動く Node.js 22 の URL で確かめました。

サイト内のリンクは / から始める書き方にそろえると、ページをフォルダごと移動してもリンクが切れにくくなります。 外部サイトへは https:// から始まる絶対URLで書きます。

外部リンクと別タブで開くリンクの書き方

外部リンク

<a href="https://example.com/">公式サイト</a>

外部サイトへのリンクは、これだけで完成です。同じタブで開くので、読者はブラウザの「戻る」で元のページに戻れます。

別タブで開く target=_blank

<a href="https://example.com/" target="_blank">公式サイト</a>

target="_blank" を付けると、新しいタブ（設定によっては新しいウィンドウ）で開きます。

別タブで開くかどうかは、読者が自分で選べる状態が基本です（Ctrl や Command を押しながらクリックすると、どのリンクも別タブで開けます）。入力中のフォームから規約を確認するリンク、PDF、作業の途中で参照するヘルプなど、「いまのページを閉じたくない」場面に絞って使うと親切です。別タブで開くことをリンクの文字で伝える書き方も紹介します。

<a href="https://example.com/terms.pdf" target="_blank">
  利用規約（PDF・新しいタブで開きます）
</a>

target=_blank に rel=noopener は必要か

結論から書くと、現行のブラウザでは target="_blank" だけで noopener と同じ動きになるため、新しく書くリンクに rel="noopener" を足さなくても同じ結果になります。

noopener が生まれた背景

以前は、別タブで開いたページ側の JavaScript から window.opener を通じて、リンク元のタブを操作できました（たとえばリンク元を別のURLへ移動させる、といった操作です）。これを防ぐために、リンク元とのつながりを切る rel="noopener" を付ける書き方が広まりました。

その後、HTML 仕様そのものが改められました。仕様（WHATWG HTML Standard の Links の章）を今回開いて確認したところ、次の内容が書かれています。

• リンクの rel に opener が含まれず、target が _blank のときは、noopener として扱う
• noreferrer は、Referer ヘッダーを送らないことに加えて、noopener と同じ効果を持つ
• opener は、あえてリンク元とのつながりを残したいときに書くキーワード

MDN の rel="noopener" のページにも、a・area・form で target="_blank" を指定すると rel="noopener" と同じ動作になる、という注記がありました。

Chromium 141 で実測した結果

リンク元（http://127.0.0.1:8150/index.html）から、別のオリジン（http://localhost:8151/dest.html）を別タブで開き、開いた先で window.opener と document.referrer を調べました。Playwright 1.56.0 と Chromium 141.0.7390.37 での結果です。

target="_blank" だけの行と rel="noopener" を付けた行は、まったく同じ結果でした。違いが出るのは noreferrer（参照元が空になる）と opener（つながりが残る）です。

参照元については、別オリジンへはオリジン（http://127.0.0.1:8150/）だけ、同じオリジンへはページのURL全体が渡っています。これはブラウザの既定の参照元ポリシーによる動きで、別サイトへはパスやパラメータが渡らないようになっています。

書くかどうかの判断表

主要ブラウザがこの動きにそろったのは2021年ごろまで、というのが一般に知られた情報です（各ブラウザの対応バージョンは今回公式ページで確認していません）。CMS やリンターが自動で rel="noopener" を付ける場合は、そのままにしておいて差し支えありません。 付いていても付いていなくても、現行ブラウザでの動きは同じです。

一点だけ気を付けたいのは noreferrer です。これを付けると、リンク先のアクセス解析では「どこから来たか」がわからなくなります。自分のサイトどうしをつなぐリンクや、紹介元として記録されたいリンクでは、noreferrer を付けないほうが目的に合います。

rel属性の値の早見表

rel は「リンク先との関係」を表す属性で、複数の値を半角スペースで区切って並べられます。

nofollow・sponsored・ugc の説明は、Google 検索セントラルの「Google に外部リンクの関係性を伝える」のページを今回開いて確認しました。同ページによると、広告や有料のリンクには sponsored が推奨され、複数の値はスペース区切り（rel="ugc nofollow"）で組み合わせられます。 sponsored と ugc は HTML 仕様の表にはなく、検索エンジン向けに使われている値です。

<!-- 広告のリンクを別タブで開く -->
<a href="https://example.com/item/" target="_blank" rel="sponsored">商品ページを見る</a>

<!-- コメント欄に投稿されたリンク -->
<a href="https://example.com/" rel="ugc nofollow">投稿されたリンク</a>

ブラウザ向けの値（noopener・noreferrer・opener）と、検索エンジン向けの値（nofollow・sponsored・ugc）は目的が別なので、必要なら両方を並べて書けます。

ページ内リンクの書き方

ページ内リンクは、行き先の要素に id を付け、href に # と id 名を書きます。

<nav aria-label="このページの目次">
  <ul>
    <li><a href="#about">概要</a></li>
    <li><a href="#price">料金</a></li>
    <li><a href="#faq">よくある質問</a></li>
  </ul>
</nav>

<h2 id="about">概要</h2>
<p>…</p>

<h2 id="price">料金</h2>
<p>…</p>

<h2 id="faq">よくある質問</h2>
<p>…</p>

別ページの特定の位置へリンクする

URL の後ろに #id名 を続けます。

<a href="/guide/#price">ガイドページの「料金」へ</a>
<a href="https://example.com/guide/#faq">外部サイトの「よくある質問」へ</a>

リンク先のページに、その id を持つ要素があることが条件です。id が見つからない場合は、ページの先頭が表示されます。

ページの先頭へ戻るリンク

<a href="#top">ページの先頭へ</a>

#top は、同じ名前の id を持つ要素がなくてもページの先頭へ移動する、という HTML 仕様の決まりがあります（一般に知られた仕様で、今回は該当箇所を開いていません）。href="#" でも先頭へ移動します。

なめらかにスクロールさせる

CSS を1行足すと、ページ内リンクの移動がなめらかになります。動きを減らす設定にしている人には、すぐ移動する形に戻しておくと親切です。

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

固定ヘッダーで見出しが隠れるときは scroll-margin-top

画面の上部にヘッダーを固定（position: fixed や sticky）していると、ページ内リンクで移動した先の見出しがヘッダーの下に隠れることがあります。移動先の要素に scroll-margin-top を指定すると、その分だけ余白を空けて止まります。

直す前

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ページ内リンクと固定ヘッダー</title>
  <style>
    body { margin: 0; }
    .site-header {
      position: fixed; top: 0; left: 0; right: 0;
      height: 64px; background: #223; color: #fff;
    }
    main { padding-top: 64px; }
    section { min-height: 1200px; }
  </style>
</head>
<body>
  <header class="site-header">
    <a href="#price">料金</a>
    <a href="#faq">よくある質問</a>
  </header>
  <main>
    <section><h2 id="about">概要</h2></section>
    <section><h2 id="price">料金</h2></section>
    <section><h2 id="faq">よくある質問</h2></section>
  </main>
</body>
</html>

直した後

style の中に、次の1行を足します。

h2[id] { scroll-margin-top: 80px; }

ヘッダーの高さ 64px に、少しゆとりを足して 80px にしています。

実測した結果

幅800px・高さ600pxの画面で「料金」のリンクをクリックし、移動後の見出しの上端の位置（画面の上端からの距離）を測りました。

クリックしたときも、別ページから #faq 付きのURLで開いたときも、同じように効きます。

scroll-margin-top と scroll-padding-top の使い分け

ヘッダーの高さを CSS 変数にしておくと、高さを変えたときに1か所の修正で済みます。

:root {
  --header-height: 64px;
}
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-height);
}
html {
  scroll-padding-top: calc(var(--header-height) + 16px);
}

id を付けたすべての要素に効かせたい場合は、:target { scroll-margin-top: 80px; } と書く方法もあります。:target は、URLの # 以降と id が一致した要素を表す疑似クラスで、今回の検証でもクリック後に :target が price の見出しを指していることを確認しました。

メールのリンク mailto の書き方

mailto: に続けてメールアドレスを書くと、クリックでメールソフトの新規作成画面が開きます。

<a href="mailto:info@example.com">メールで問い合わせる</a>

件名・本文・CC を付ける

アドレスの後ろに ? を付け、名前=値 を & でつないで指定します。

<a href="mailto:info@example.com?subject=Hello%20World&body=Line1%0D%0ALine2">
  メールを書く
</a>

日本語の件名と本文を付ける

日本語や記号は、パーセントエンコード（%E5%82%99… のような形）に変換して書きます。 変換は JavaScript の encodeURIComponent でできます。Node.js 22 での実行例です。

const to = 'info@example.com';
const subject = '備品の貸し出しについて';
const body = 'お世話になっております。\r\n以下の備品を借りたいです。\r\n・モニター 1台';

const href = 'mailto:' + to
  + '?subject=' + encodeURIComponent(subject)
  + '&body=' + encodeURIComponent(body);
console.log(href);

実行結果です。

mailto:info@example.com?subject=%E5%82%99%E5%93%81%E3%81%AE%E8%B2%B8%E3%81%97%E5%87%BA%E3%81%97%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6&body=%E3%81%8A%E4%B8%96%E8%A9%B1%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%8A%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%0D%0A%E4%BB%A5%E4%B8%8B%E3%81%AE%E5%82%99%E5%93%81%E3%82%92%E5%80%9F%E3%82%8A%E3%81%9F%E3%81%84%E3%81%A7%E3%81%99%E3%80%82%0D%0A%E3%83%BB%E3%83%A2%E3%83%8B%E3%82%BF%E3%83%BC%201%E5%8F%B0

出力された文字列を、そのまま href に貼り付けます。

<a href="mailto:info@example.com?subject=%E5%82%99%E5%93%81%E3%81%AE%E8%B2%B8%E3%81%97%E5%87%BA%E3%81%97%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6&amp;body=%E3%81%8A%E4%B8%96%E8%A9%B1%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%8A%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%0D%0A%E4%BB%A5%E4%B8%8B%E3%81%AE%E5%82%99%E5%93%81%E3%82%92%E5%80%9F%E3%82%8A%E3%81%9F%E3%81%84%E3%81%A7%E3%81%99%E3%80%82%0D%0A%E3%83%BB%E3%83%A2%E3%83%8B%E3%82%BF%E3%83%BC%201%E5%8F%B0">
  備品の貸し出しをメールで申し込む
</a>

HTML の属性の中では、& を & と書くのが正式な書き方です（上の例の &body=）。変換の様子を表にすると次のとおりです。

mailto のリンクが実際にメールソフトでどう開くかは、端末の設定やメールソフトによって変わります。今回はメールソフトでの表示確認はしていません（未実行）。メールソフトを設定していない読者もいるので、リンクの文字や近くにメールアドレスそのものも書いておくと、コピーして使ってもらえます。

電話番号のリンク tel の書き方

tel: に続けて電話番号を書くと、スマートフォンではタップで発信画面が開きます。

<a href="tel:+81312345678">03-1234-5678</a>

パソコンでは、通話アプリが設定されていない場合にクリックしても何も起きないことがあります。スマートフォンの幅のときだけリンクとして見せ、パソコンでは文字として見せる CSS の例です。

/* 画面幅が広いときは、電話リンクを文字として扱う */
@media (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
    color: inherit;
    text-decoration: none;
  }
}

tel のリンクが各端末でどう開くかは、今回は実機で確認していません（未実行）。

ファイルをダウンロードさせる download 属性の書き方

download 属性を付けると、リンク先をページとして開く代わりに、ファイルとして保存する動きになります。

<!-- 元のファイル名のまま保存 -->
<a href="/files/report.csv" download>CSVをダウンロード</a>

<!-- 名前を変えて保存 -->
<a href="/files/report.csv" download="list-2026-10.csv">CSVをダウンロード</a>

<!-- 種類とサイズを添えると親切 -->
<a href="/files/manual.pdf" download>利用マニュアル（PDF・1.2MB）</a>

Chromium 141 で実測した結果

同じオリジンと別オリジンのファイルで、download 属性の効き方を確かめました（Playwright 1.56.0 のヘッドレス実行で、保存時に提案されたファイル名を取得）。

ここから読み取れるポイントは次の3つです。

• download 属性が確実に効くのは、同じオリジンのファイルです。別オリジンでは、ファイル名の指定は反映されず、ブラウザが表示できる種類（HTML など）はふつうのリンクと同じようにページ移動になりました
• 別オリジンのファイルを確実に保存させたい場合は、配信するサーバー側で Content-Disposition: attachment ヘッダーを付ける方法が使えます（今回この方法は未実行です）
• 日本語のファイル名は、今回のヘッドレス環境では反映されませんでした。通常の画面つきブラウザでの動きは確認していないため、確実さを優先するなら半角英数字とハイフンのファイル名にしておくと安心です

リンクの文字と中身の書き方

リンクの文字は行き先がわかる言葉にする

読み上げソフトには、ページ内のリンクだけを一覧で読み上げる機能があります。そのとき「こちら」「詳しくはこちら」が並ぶと、行き先の区別がつきません。

リンクの文字だけで行き先がわかる形にすると、検索エンジンにも読者にも内容が伝わりやすくなります。

画像をリンクにする

<a href="/items/pothos/">
  <img src="/img/pothos.jpg" alt="ポトスの商品ページへ" width="300" height="200">
</a>

画像だけをリンクにするときは、alt がリンクの文字の代わりになります。alt が空だと、行き先が伝わらないリンクになるので、行き先を表す言葉を入れます。

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

a 要素の中には、見出しや段落、div を入れられます。カード全体をクリックできるようにする書き方です。

<a href="/articles/water/" class="card">
  <div>
    <h3>観葉植物の水やりの基本</h3>
    <p>土の表面が乾いてから与えます。</p>
  </div>
</a>

一方で、a の中に別の a や button など、クリックできる要素は入れられません。

検証ツールで確かめたエラーの例

つまずきやすい書き方をまとめた HTML を、Nu Html Checker（vnu.jar 26.10.2）にかけました。

<a href="/a/"><a href="/b/">入れ子のリンク</a></a>
<a href="/c/"><button type="button">ボタン入りリンク</button></a>
<a href="/d/" target="_blank" rel="noopner">relのつづり違い</a>
<a href="my page.html">空白を含むURL</a>
<a target="_blank">hrefなしでtarget</a>
<a href="/e/"><div><h2>カード全体をリンクにする</h2><p>説明文</p></div></a>
<a href="#a" name="top">name属性</a>

実行結果です（a 要素に関する行を抜粋。行番号は検証に使ったファイルでの位置）。

"bad.html":3.15-3.28: error: Start tag “a” seen but an element of the same type was already open.
"bad.html":3.40-3.43: error: Stray end tag “a”.
"bad.html":4.15-4.36: error: The element “button” must not appear as a descendant of the “a” element.
"bad.html":5.1-5.44: info: Potentially bad value “noopner” for attribute “rel” on element “a” Typo for “noopener”?
"bad.html":6.1-6.23: error: Bad value “my page.html” for attribute “href” on element “a”: Illegal character in path segment. Space is not allowed.
"bad.html":7.1-7.19: error: Element “a” is missing required attribute “href”.
"bad.html":9.1-9.24: info warning: The “name” attribute on the “a” element is obsolete. Consider putting an “id” attribute on the nearest container instead.

リンクが思ったとおりに動かないときの確認表

よくある質問

Q. target="_blank" には必ず rel="noopener noreferrer" を付けるべきですか？ A. 現行のブラウザでは、target="_blank" だけで noopener と同じ動きになります。今回の Chromium 141 での実測でも、付けた場合と付けない場合で window.opener はどちらも null でした。付けたままでも動作に影響はありません。noreferrer は参照元を送らなくする指定なので、リンク先に「どこから来たか」を伝えたい場合は外します。

Q. nofollow と sponsored と ugc はどう使い分けますか？ A. 広告や有料のリンクは sponsored、コメント欄などユーザーが書いたリンクは ugc、どちらにも当てはまらないが関連付けたくないリンクは nofollow です。rel="ugc nofollow" のように組み合わせることもできます。通常の参考リンクには、どれも付けなくて問題ありません。

Q. ページ内リンクの行き先は name 属性と id 属性のどちらで作りますか？ A. id 属性です。a 要素の name 属性は以前の書き方で、検証ツールでも id を使うよう案内されます。見出しや section など、移動させたい要素に直接 id を付けます。

Q. scroll-margin-top と scroll-padding-top はどちらを使えばよいですか？ A. ページ全体で同じ余白でよければ、html に scroll-padding-top を1か所指定するのが手軽です。見出しの種類によって余白を変えたい場合は、要素ごとに scroll-margin-top を指定します。今回の実測では、どちらも同じ位置（80px）で止まりました。

まとめ

• リンクは href に行き先を書く。URL のほか、#id名・mailto:・tel: も指定できる
• target="_blank" だけで noopener と同じ動きになる（HTML 仕様の記述と Chromium 141 の実測で確認）。参照元も渡したくないときは rel="noreferrer"
• rel の値は目的で選ぶ：ブラウザ向けの noopener・noreferrer・opener、検索エンジン向けの nofollow・sponsored・ugc
• ページ内リンクは id と #id名 の組み合わせ。別ページの特定位置へは URL#id名
• 固定ヘッダーで見出しが隠れるときは scroll-margin-top（または html に scroll-padding-top）で余白を空ける
• mailto の日本語は encodeURIComponent で変換し、改行は %0D%0A
• download 属性が確実に効くのは同じオリジンのファイル。ファイル名は半角英数字が安心

株式会社RJCでは、aタグのリンクの書き方のようなHTMLの基礎を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。