baseタグ -相対 URL の基準を設定する｜HTML辞典
<base>タグとは？
<base> タグは、HTML 文書内で相対 URL の基準（ベース URL）を設定するためのタグです。
ページ内のすべての相対リンク（画像、CSS、スクリプトなど）に適用されます。
コンテンツモデル
メタデータコンテンツ（Metadata Content）。
閉じタグの有無
<base> は 自己終了タグ であり、閉じタグ（</base>）は不要 です。
基本的な記述方法
php-templateコピーする編集する<head>
<base href="https://example.com/">
</head>
この設定により、HTML 内の相対パスが https://example.com/ を基準として解釈されます。
使用できる主な属性
| 属性名 | 説明 | 例 |
|---|---|---|
href | ベースとなる URL を指定 | <base href="https://example.com/"> |
target | リンクの開き方を指定 | <base target="_blank"> |
target の使用例
<head>
<base href="https://example.com/" target="_blank">
</head>
この設定では、すべてのリンクが 新しいタブ で開かれます。
CSSを使ったデザイン変更
<base> タグは デザインには影響を与えないタグ なので、CSS でのスタイル変更は不要です。
適切な使用例
✅ HTML 内のすべての相対リンクを基準 URL に統一する
<head>
<base href="https://example.com/">
</head>
<body>
<a href="contact.html">お問い合わせ</a> <!-- 実際のリンク先: https://example.com/contact.html -->
<img src="images/logo.png" alt="ロゴ"> <!-- 実際の画像URL: https://example.com/images/logo.png -->
</body>
✅ target="_blank" で、すべてのリンクを新しいタブで開く
<head>
<base href="https://example.com/" target="_blank">
</head>
<body>
<a href="about.html">会社概要</a> <!-- 新しいタブで開く -->
</body>
適切でない使用例（誤った使い方）
❌ <base> を <body> 内に記述する（<head> 内でのみ使用可能）
<!-- NG: <body> 内に <base> を記述 -->
<body>
<base href="https://example.com/">
</body>
✅ 正しい書き方（<head> 内に記述）
<head>
<base href="https://example.com/">
</head>
❌ <base> を複数記述する（1つの HTML に1つだけ記述可能）
<!-- NG: <base> が複数存在 -->
<head>
<base href="https://example1.com/">
<base href="https://example2.com/">
</head>
✅ 正しい書き方（1つのみ記述）
<head>
<base href="https://example.com/">
</head>
<base>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<base> | 相対リンクの基準 URL を指定 | <head> 内で1つのみ使用 | すべてのリンクに共通の基準を設定 |
<a> | 個別のリンクを作成 | href でリンク先を指定 | 各リンクの指定 |
<link> | 外部リソースを読み込む | rel="stylesheet" などで使用 | CSS などの外部ファイル指定 |
使用上の注意点
✅ <base> は <head> 内に 1 つだけ記述する
- 複数記述すると無効になる可能性があるため、1 つだけ指定する。
✅ target="_blank" を使うと、すべてのリンクが新しいタブで開かれる
- ユーザーの意図に合うかどうかを考えて設定する。
✅ <base> を使うと、HTML 内のすべての相対リンクが影響を受ける
- 特定のリンクだけ基準 URL を変えたい場合は
<base>を使用せず、<a href="https://example.com/contact.html">のように絶対 URL を指定する方がよい。
関連タグ
まとめ
<base> タグは、HTML 文書内の すべての相対 URL の基準を設定するためのタグ です。
Web サイト内のリンク管理を簡単にすることができますが、1 つの HTML に 1 つだけ記述し、適切に運用することが重要です。
