HTML の <base> 要素は、文書内に含まれるすべての相対 URL の基点となる URL を指定します。 <base> 要素は、文書内に1つだけ置くことができます。
文書の基底 URL は document.baseURI を使用して、スクリプトから問い合わせることができます。
| コンテンツカテゴリ | メタデータコンテンツ |
|---|---|
| 許可されている内容 | なし。この要素は空要素。 |
| タグの省略 | 終了タグを用いてはならない。 |
| 許可されている親要素 | 他の <base> 要素を含まない <head> |
| 許可されている ARIA ロール | なし |
| DOM インターフェイス | HTMLBaseElement |
属性
この要素にはグローバル属性があります。
href- 文書全体を通して相対 URL に使用される基底 URL です。この属性を指定する場合、この要素は属性値に URL を持つ他のどの要素よりも先に記述しなければなりません。絶対 URL と相対 URL が使用できます。
target- 名前またはキーワードで、ハイパーリンクやフォームによって移動が発生したときに、表示先が明確に示されていない要素において、結果を表示する既定の表示場所を示します。これは、閲覧コンテキスト (タブ、ウィンドウ、インラインフレーム、など) を示す名前またはキーワードです。以下のキーワードは特別な意味を持ちます。
_self: 同じ閲覧コンテキストに結果を読み込みます。この値は、属性が指定されていない場合の既定値です。_blank: 新しい無名の閲覧コンテキストに結果を読み込みます。_parent: 現在のコンテキストの親の閲覧コンテキストに結果を読み込みます。親がない場合、このオプションは_selfと同じ振る舞いをします。_top: 最上位の閲覧コンテキスト (現在のコンテキストの祖先で、それ以上の親をもたない閲覧コンテキスト）に結果を読み込みます。親がない場合、このオプションは_selfと同じ振る舞いをします。
この属性が指定された場合、この要素は値が URL である属性を持つ他の要素よりも前に置く必要があります。
使用上のメモ
複数の <base> 要素が指定された場合、最初の href と最初の target の値が使用され、他はすべて無視されます。
例
<base href="http://www.example.com/page.html"> <base target="_blank" href="http://www.example.com/page.html">
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| HTML Living Standard <base> の定義 |
現行の標準 | 最新のスナップショットから変更なし |
| HTML5 <base> の定義 |
勧告 | target の挙動を定義 |
| HTML 4.01 Specification <base> の定義 |
勧告 | target 属性を追加 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
base | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 1 | IE
完全対応
あり
| Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
href | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 1 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
target | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。
ヒント
- ページ内へのアンカータグ (例えば
<a href="#anchor">anchor</a>) を使用すると、基底 URL を参考にして解決され、基底 URL に対して HTTP リクエストを発行します。
例:
基底 URL:
<base href="http://www.example.com/">
アンカー:
<a href="#anchor">Anker</a>
参照先:
http://www.example.com/#anchor
OpenGraph
OpenGraph のメタタグは基底 URL を認識しないので、次のように常に完全 URL を使用してください。
<meta property='og:image' content='http://example.com/thumbnail.jpg'>