この記事の要点

href 属性は a 要素 (アンカー) でリンク先 URL を指定する属性 指定可能な URL: 絶対 URL (https://...) / 相対 URL (./page.html) / ページ内リンク (#id) プロトコル付きリンク: mailto: (メール) / tel: (電話) / javascript: (JS) もサポート target="_blank" で別タブ — セキュリティのため rel="noopener noreferrer" を併用 外部リンクは rel="nofollow" や rel="ugc" で SEO 上の評価を制御

href 属性とは

href (Hypertext REFerence) は a 要素や link 要素でリンク先 URLを指定する属性です。Web を「Web (くも の巣)」たらしめている最重要属性のひとつ。

基本構文

<a href="リンク先 URL">表示テキスト</a>

<a href="https://example.com/">Example へ</a>

指定可能な URL の種類

種類	例	説明
絶対 URL	https://example.com/page.html	プロトコル + ドメインから完全に指定
プロトコル相対 URL	//example.com/page.html	現在のプロトコル (http/https) を引き継ぐ
ルート相対 URL	/about/	サイト ルートからの絶対パス
文書相対 URL	./next.html / ../up.html	現在の文書からの相対
ページ内リンク (フラグメント)	#section1	同一ページの id へジャンプ
他ページの特定セクション	/article.html#section2	ページ移動 + フラグメント
mailto	mailto:user@example.com	メーラ起動
tel	tel:+81-3-1234-5678	電話発信 (スマホ)
sms	sms:+81-90-1234-5678	SMS アプリ起動
javascript	javascript:alert('hi')	JS 実行 (非推奨)

絶対 URL

<!-- 完全な URL -->
<a href="https://example.com/path/to/page.html">完全な絶対 URL</a>

<!-- プロトコル相対 (http/https どちらにも対応) -->
<a href="//example.com/page.html">プロトコル相対</a>

相対 URL

<!-- 現在の URL: https://example.com/blog/article.html -->

<a href="next.html">     <!-- https://example.com/blog/next.html -->
<a href="./next.html">   <!-- 上と同じ (./ は明示) -->
<a href="../about.html"> <!-- https://example.com/about.html (1 つ上) -->
<a href="/contact.html"> <!-- https://example.com/contact.html (ルートから) -->
<a href="?q=hello">      <!-- 同 URL + クエリパラメータ -->

ページ内リンク (フラグメント)

# に続けて id を書くと、その要素までスクロールします。

<!-- 目次から本文へ -->
<ul>
    <li><a href="#chapter-1">第 1 章</a></li>
    <li><a href="#chapter-2">第 2 章</a></li>
</ul>

<h2 id="chapter-1">第 1 章</h2>
<p>...</p>

<h2 id="chapter-2">第 2 章</h2>
<p>...</p>

<!-- ページ先頭に戻る -->
<a href="#top">▲ ページの先頭へ</a>

mailto / tel / sms — プロトコルリンク

<!-- メール送信 (本文・件名・宛先を URL パラメータで指定可) -->
<a href="mailto:info@example.com">問い合わせる</a>
<a href="mailto:info@example.com?subject=お問い合わせ&body=本文">
  件名と本文付き
</a>

<!-- 電話発信 (国際表記推奨) -->
<a href="tel:+81-3-1234-5678">03-1234-5678</a>

<!-- SMS 送信 -->
<a href="sms:+81-90-1234-5678?body=こんにちは">SMS</a>

target 属性 — リンクの開き方

値	意味
_self	同じタブで開く (デフォルト)
_blank	新しいタブで開く
_parent	親フレームで開く (iframe 内)
_top	最上位ウィンドウで開く
(名前)	指定した名前の (i)frame で開く

<!-- 新規タブで開く + セキュリティ対策 -->
<a href="https://external.example.com/"
   target="_blank"
   rel="noopener noreferrer">外部サイト</a>

重要: target="_blank" に rel="noopener noreferrer" を付けないと、Reverse Tabnabbing という攻撃を許す恐れがあります (リンク先 JS が window.opener 経由で元タブを操作可能)。最新ブラウザではデフォルト無効化されつつありますが、明示推奨。

rel 属性 — リンクの関係性

値	意味
noopener	新規タブから window.opener 経由のアクセスを禁止
noreferrer	リファラを送信しない
nofollow	検索エンジンに辿らせない (SEO 評価を渡さない)
ugc	ユーザー生成コンテンツ (コメント / 投稿)
sponsored	広告 / アフィリエイト
external	外部サイトへのリンク
me	自分の他プロフィールへのリンク

ダウンロードリンク

download 属性を付けると、リンクをクリックしたときにブラウザがダウンロードとして扱います。

<!-- 元ファイル名のままダウンロード -->
<a href="/files/report.pdf" download>レポート PDF</a>

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

注意: クロスオリジンの URL では download 属性が無効化される (CORS の制限)。

空のリンク / プレースホルダ

JS で動的にリンク先を入れる場合、暫定で空のリンクを書くことがあります。href="#" はページトップにジャンプしてしまうので注意。

<!-- NG: ページトップに飛ぶ + ブラウザ履歴を汚す -->
<a href="#" onclick="doSomething()">ボタン</a>

<!-- 改善: イベントを止める -->
<a href="#" onclick="event.preventDefault(); doSomething();">ボタン</a>

<!-- 推奨: ボタンには button 要素を使う -->
<button type="button" onclick="doSomething()">ボタン</button>

アクセシビリティ

• リンクテキストは意味のある言葉に — 「こちら」「クリック」は NG
• 同じテキストで違うリンク先は避ける — スクリーンリーダーで区別できなくなる
• 外部サイトリンクには明示的なアイコンや説明を
• ファイルダウンロードはサイズや形式も伝える: 「PDF 形式 (2.3MB)」

FAQ

Q: 相対 URL と絶対 URL どちらが良い？
A: 内部リンクは相対 (またはルート相対)。ドメイン変更や開発環境への移植が楽。SEO 上の差はない。

Q: javascript: 疑似プロトコルは使うべき？
A: 非推奨。CSP (Content Security Policy) で禁止されることが多く、アクセシビリティも悪い。button + イベントリスナーを使う。

Q: tel: リンクは PC で動く？
A: スマホ / Skype 等のソフト電話アプリで起動。PC で何も起きなくても、CSS で隠さず表示するのが UX 上良い。

関連

• address要素 — 問い合わせ先を表すセマンティック要素
• a 要素 — アンカー本体
• link 要素 — head 内のリソースリンク
• target / rel / download — 関連属性