<base>: 文書の基底 URL 要素

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

<base>HTML の要素で、文書内におけるすべての相対 URL の基点となる URL を指定します。 <base> 要素は、文書内に 1 つだけ置くことができます。

文書に使われている基底 URL は、スクリプトから Node.baseURI を使用して問い合わせることができます。文書に <base> 要素がなかった場合、 baseURI は既定で location.href になります。

コンテンツカテゴリー メタデータコンテンツ
許可されている内容 なし。この要素は空要素です。
タグの省略 終了タグを用いてはならない。
許可されている親要素 <head> 要素で、他に <base> 要素を含んでいないもの。
暗黙の ARIA ロール 対応するロールなし
許可されている ARIA ロール 許可されている role なし
DOM インターフェイス HTMLBaseElement

属性

この要素にはグローバル属性があります。

警告: 以下の属性のいずれかが指定されている場合、この要素は URL の属性値を持つ他の要素、例えば <link>href 属性などの前に置く必要があります

href

文書全体を通して相対 URL に使用される基底 URL です。絶対 URL と相対 URL が使用できます。

target

キーワードまたは作者が定義した名前で、既定の閲覧コンテキストを表し、 <a> または <form> 要素が明示的に target 属性を持たない場合に、移動の結果を表示する先として使用されます。以下のキーワードは特別な意味を持ちます。

  • _self (既定値): 現在の閲覧コンテキストに結果を表示します。
  • _blank: 新しい無名の閲覧コンテキストに結果を表示します。
  • _parent: 現在のコンテキストの親の閲覧コンテキストに結果を表示します。親がない場合、このオプションは _self と同じ振る舞いをします。
  • _top: 最上位の閲覧コンテキスト (現在のコンテキストの祖先で、それ以上の親をもたない閲覧コンテキスト)に結果を表示します。親がない場合、このオプションは _self と同じ振る舞いをします。

使用上の注意

複数の <base> 要素

複数の <base> 要素が使用された場合、最初の href と最初の target の値が使用され、他はすべて無視されます。

ページ内アンカー

文書内のフラグメントを指すリンク — 例えば <a href="#some-id"> — は <base> を使用して解決され、基底 URL にフラグメントを付けて HTTP リクエストを発行します。

例えば、 <base href="https://example.com/"> が指定され、<a href="#anchor">To anchor</a> というリンクがあったとします。リンク先は https://example.com/#anchor となります。

Open Graph

Open Graph のメタタグは <base> を認識しないので、次のように常に完全 URL を使用してください。

html
<meta property="og:image" content="https://example.com/thumbnail.jpg" />

html
<base href="https://www.example.com/" />
<base target="_blank" />
<base target="_top" href="https://example.com/" />

仕様書

Specification
HTML
# the-base-element

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
base
href
data: and javascript: urls are not allowed
Relative URIs.
target

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support