HTML a要素の使い方｜href・target・rel noopenerのセキュリティ

▶

編集

この記事の要点

a 要素（アンカー要素）はハイパーリンクを作る HTML 要素
href 属性がある場合はリンク、ない場合はプレースホルダーとして扱われる
主な属性: href / target / rel / download / hreflang / type
target="_blank" を使うときは必ず rel="noopener noreferrer"を付けてセキュリティ対策
ブロックレベル要素を中に入れることが HTML5 から許可されており、カード全体をリンクにできる

a 要素とは

a 要素（アンカー要素）は HTML でハイパーリンクを作るための要素です。テキスト、画像、ブロック要素まで何でも包んで「クリックすると別の URL へ遷移する」リンクに変えられます。

基本構文

<!-- 通常のリンク -->
<a href="sample.html">サンプルへ</a>

<!-- 別タブで開く -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部サイト</a>

<!-- ダウンロード -->
<a href="report.pdf" download>レポート PDF</a>

<!-- ページ内アンカー -->
<a href="#section3">第 3 章へ</a>

<!-- href なし（プレースホルダー） -->
<a>後で設定予定</a>

a 要素に指定できる主な属性

属性名	意味	備考
`href`	リンク先 URL	絶対 / 相対 / ハッシュ / mailto / tel など
`target`	リンク先の開き方	`_self` / `_blank` / `_parent` / `_top`
`rel`	リンクの関連性	`noopener` / `noreferrer` / `nofollow` / `author` など
`download`	ダウンロードファイル指定	属性値がファイル名になる
`hreflang`	リンク先の言語	BCP 47（例: `ja`、`en-US`）
`type`	リンク先の MIME タイプ	例: `application/pdf`
`referrerpolicy`	Referer 送出方針	プライバシー / 解析制御

href の書き方

形式	例	挙動
絶対 URL	`https://example.com/about`	完全な URL を指定
プロトコル相対	`//example.com/about`	現在の HTTP/HTTPS を継承
ルート相対	`/about`	サイトルートからの相対
ドキュメント相対	`about.html` / `../docs/x.html`	現ファイルからの相対
フラグメント	`#section3`	同一ページ内の id へジャンプ
mailto	`mailto:info@example.com`	メーラを起動
tel	`tel:+819012345678`	電話アプリを起動
JavaScript	`javascript:void(0)`	非推奨。`button` の方が適切

target 属性とセキュリティ

target="_blank" で新しいタブを開く場合、リンク先が window.opener 経由で元タブに干渉できる脆弱性（タブナビングなど）が知られています。必ず rel="noopener noreferrer" を付けます。

<!-- 推奨 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  外部サイト
</a>

rel 値	意味
`noopener`	新しいタブから `window.opener` を切る（必須）
`noreferrer`	Referer ヘッダを送らない（プライバシー）
`nofollow`	検索エンジンにリンクを辿らせない
`ugc`	ユーザー生成コンテンツのリンク
`sponsored`	広告 / 有償リンク

download 属性

<!-- ファイル名を指定してダウンロード -->
<a href="/files/report.pdf" download="2026年度報告.pdf">
  レポートをダウンロード
</a>

属性値を省略するとサーバ側のファイル名がそのまま使われます。同一オリジンでないと無視されるブラウザ仕様なので、外部 URL に download を付けても期待通り動かないことがあります。

ブロック要素を中に入れる

HTML5 以降は a 要素の中に div、section などのブロック要素を入れられます。これによりカード全体をクリック可能にできます。

<a href="/article/123" class="card">
  <article>
    <h3>記事タイトル</h3>
    <p>本文の冒頭...</p>
    <img src="thumb.jpg" alt="" />
  </article>
</a>

ただし a の中にさらに a や button など他の対話可能要素を入れることはできません（インタラクティブコンテンツの入れ子禁止）。

アクセシビリティ（aria）

リンクの目的が文脈だけでは伝わらない場合、aria-label を補います。アイコンだけのリンクや「もっと見る」を多用するページで重要です。

<!-- アイコンだけのリンク -->
<a href="/search" aria-label="検索ページを開く">
  <svg>...</svg>
</a>

<!-- 「もっと見る」が複数ある場合 -->
<a href="/news/1" aria-label="ニュース記事『新製品発表』の続きを読む">
  続きを読む
</a>

href なしの a 要素

href を持たない a 要素はプレースホルダーとして扱われます。CSS のホバー効果も付かず、キーボードフォーカスも当たりません。後から JS でリンク化する予定の場所などに使います。

クリックできるが遷移しない要素が必要なときは、a ではなく button 要素を使うのが正解です。

よくあるトラブル

症状	原因と対処
外部リンクから戻ると元タブが書き換わっていた	`rel="noopener"` 漏れ。タブナビング対策必須
download が効かない	クロスオリジンの可能性。Content-Disposition ヘッダで代替
ページ内アンカーでヘッダに隠れる	`scroll-margin-top` でオフセット指定
クリック時に遷移しない	`href="#"` + `preventDefault` 漏れ。`button` 推奨
SEO で内部リンクが評価されない	`javascript:` や onclick のみのリンクは評価されにくい

FAQ

Q: a 要素にホバー時の色をデフォルトで付けたい
A: ブラウザ既定で a:link（青）、a:visited（紫）、a:hover、a:active の擬似クラスが効きます。CSS でまとめて上書き可能です。

Q: 同一ページ内のリンクで戻るボタンの動きは？
A: フラグメントリンクは履歴に追加されるので、戻るボタンで戻れます。SPA の場合は history.pushState で制御します。

Q: メールリンクで件名を指定したい
A: mailto:info@example.com?subject=お問い合わせ&body=本文 のようにクエリで指定できます。

ページ一覧

その他