タイトル: href属性
SEOタイトル: HTML href 属性 完全ガイド（絶対URL / 相対URL / ページ内リンク / mailto / tel / target / rel）
| この記事の要点 |
|
href 属性とは
href (Hypertext REFerence) は a 要素や link 要素でリンク先 URLを指定する属性です。Web を「Web (くも の巣)」たらしめている最重要属性のひとつ。
基本構文
表示テキスト
Example へ指定可能な 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
プロトコル相対相対 URL
ページ内リンク (フラグメント)
# に続けて id を書くと、その要素までスクロールします。
第 1 章
...
第 2 章
...
▲ ページの先頭へmailto / tel / sms — プロトコルリンク
問い合わせる
件名と本文付き
03-1234-5678
SMStarget 属性 — リンクの開き方
| 値 | 意味 |
|---|---|
_self | 同じタブで開く (デフォルト) |
_blank | 新しいタブで開く |
_parent | 親フレームで開く (iframe 内) |
_top | 最上位ウィンドウで開く |
| (名前) | 指定した名前の (i)frame で開く |
外部サイト重要: target="_blank" に rel="noopener noreferrer" を付けないと、Reverse Tabnabbing という攻撃を許す恐れがあります (リンク先 JS が window.opener 経由で元タブを操作可能)。最新ブラウザではデフォルト無効化されつつありますが、明示推奨。
rel 属性 — リンクの関係性
| 値 | 意味 |
|---|---|
noopener | 新規タブから window.opener 経由のアクセスを禁止 |
noreferrer | リファラを送信しない |
nofollow | 検索エンジンに辿らせない (SEO 評価を渡さない) |
ugc | ユーザー生成コンテンツ (コメント / 投稿) |
sponsored | 広告 / アフィリエイト |
external | 外部サイトへのリンク |
me | 自分の他プロフィールへのリンク |
ダウンロードリンク
download 属性を付けると、リンクをクリックしたときにブラウザがダウンロードとして扱います。
レポート PDF
4 月レポートをダウンロード
注意: クロスオリジンの URL では download 属性が無効化される (CORS の制限)。
空のリンク / プレースホルダ
JS で動的にリンク先を入れる場合、暫定で空のリンクを書くことがあります。href="#" はページトップにジャンプしてしまうので注意。
ボタン
ボタン
アクセシビリティ
- リンクテキストは意味のある言葉に — 「こちら」「クリック」は 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— 関連属性