タイトル: aタグのhrefの記載方法
SEOタイトル: HTML a タグ href 完全ガイド — 絶対/相対/フラグメント/Laravel route
| この記事の要点 |
|
href の基本
HTML タグの href 属性はリンク先 URL を指定します。URL の書き方は複数あり、用途で使い分けます。
主な href の種類
| 種類 | 例 | 解決先 |
|---|---|---|
| 絶対 URL | https://example.com/page | そのまま |
| プロトコル相対 | //example.com/page | 現在のスキーム (http/https) |
| ルート相対 | /path/page | サイトルートから |
| 相対 (同階層) | page.html | 現在ディレクトリから |
| 相対 (親階層) | ../page.html | 1 階層上から |
| フラグメント | #section | 同ページ内 |
| クエリ | ?id=1 | 現在 URL にクエリ追加 |
| mailto: | mailto:foo@example.com | メールクライアント起動 |
| tel: | tel:+81-3-1234-5678 | 電話アプリ起動 |
| javascript: | javascript:void(0) | JS 実行 (非推奨) |
絶対 URL
外部サイトへのリンク、SNS シェア、メールに貼るリンク等は絶対 URL:
外部記事
CDNルート相対 (推奨)
同一ドメイン内のリンクにはルート相対が無難:
About
ノートパソコン
スタイル利点:
- 現在のページ階層に依存しないので壊れにくい
- ステージング / 本番のドメインが違っても同じパスで動く
- SSR / 静的サイトジェネレータと相性◎
相対 URL
現在のページからの相対パス。ファイルシステムベースのサイトで使います:
/blog/2024/next.html へ
/blog/2023/old.html へ
/about.html へ
同階層 (= page.html)注意: ベース URL は
フラグメント (ページ内リンク)
セクション 1 へ
セクション 1
コメント欄
先頭へ
先頭へ (top はブラウザ既定)
クエリパラメータ
次ページ
並び替え
HTML 検索特殊スキーム
お問い合わせ
資料請求
複数宛先
03-1234-5678
国内表記でも可
SMS
マニュアルをダウンロード
CSV を保存JavaScript URL (非推奨)
クリック
処理
処理target / rel / download 属性
外部
親に開く
最上位に開く
レポート
English
広告Laravel での書き方
Laravel では URL ヘルパー / ルートヘルパーを使うと、ルート定義変更時にも壊れません:
// Blade テンプレ
// 1. ルート名で生成 (推奨)
ホーム
記事 123
// 2. URL ヘルパー
About
記事
// 3. asset ヘルパー (CSS / JS / 画像)
 }})
// 4. 現在のクエリを保持
次ページ
次ページ
// 5. ログインユーザーのプロフィールへ
マイページroutes/web.php 側:
Route::get('/article/{id}', [ArticleController::class, 'show'])->name('article.show');
Route::get('/', [HomeController::class, 'index'])->name('home');
ページ
SPA や iframe 多用ページで便利。ただし副作用 (フラグメント #anchor も絶対 URL 化される) があるので慎重に。
href の選び方フローチャート
- 外部サイトへのリンク? → 絶対 URL +
target="_blank" rel="noopener noreferrer" - 同サイト内?
- 同ページ内ジャンプ → フラグメント (#id)
- サーバサイドルーティング (Laravel/Rails) → ルート相対 (route ヘルパー推奨)
- 静的サイト (HTML 直書き) → ルート相対
- メール / 電話アプリ起動 → mailto: / tel:
- ファイルダウンロード → 絶対 or ルート相対 +
download - JS 実行のみ → button タグに置き換える
FAQ
Q: 相対 URL とルート相対 URL、どちらを使うべき?
A: 個別ファイルでサイト構成が変わらないなら相対でも OK。テンプレ展開やリファクタリングが多いプロジェクトはルート相対 (または route ヘルパー) が壊れにくい。
Q: href="" (空) はどうなる?
A: 現在のページを再読み込みします (POST 後の意図しない再送信に注意)。意図せず空になっていないかチェック。
Q: SPA で a タグだと全リロードしてしまう
A: フレームワーク標準の Link コンポーネント (Next.js Link, Vue Router RouterLink) を使うと SPA 遷移になります。