This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

base

Summary

<base>は文書の基準となるURLを明示し、文書内の相対URLを解決するために使用します。.

Overview Table

DOM Interface
HTMLBaseElement
Permitted contents *なし*
Permitted parents [``](/html/elements/head)タグ内で1度のみ許可されています。
アクセスする前に相対URL(some/example.html)を絶対URL() に変換しなければいけません。通常、相対URLを解決するためのベースURLとしてそのドキュメントのURL(JavaScriptで使用する[`location`](/w/index.php?title=dom/Location/ja&action=edit&redlink=1)オブジェクト)が使用されます。\要素の[`href`](/w/index.php?title=html/attributes/href/ja&action=edit&redlink=1)属性を記述することでデフォルトのベースURLを上書く事ができます。

リンク(<a>)やフォーム(<form>)でtargetを開きますが、デフォルトのtargetは_selfで、現在ドキュメントを表示しているのと同じウィンドウでリンクを開くことになります。<base target="…">と書くことでドキュメント全体のtargetのデフォルトを上書くことができます。

ドキュメントがiframeを使って構成されている場合、<base target="_parent">と設定することで親フレームでリンクを開くことができます。フレームを使っていないドキュメントで_parent_topを使用する場合、_selfと同じ動きになります。

HTML属性

  • href= URI(前後のスペースは取り除かれます。)
    href属性を指定した<base>要素は、URLを使う属性を持つ他の要素よりも前に記述しなければいけません。(<html>要素以外。manifest属性はbase要素の影響を受けないため。)[Example A]

  • target = ブラウジング・コンテキストの名前、もしくは_blank, _self, _parent, _topのいずれか
    ハイパーリンクやフォームがナビゲーションを表している場合、base要素のtarget属性の値がデフォルト値になります。

Examples

この例は関連ドキュメントsome-file.htmlへのリンクをhttp://example.org/deep/some-file.htmlに書き換えています。

<!DOCTYPE html>
<html>
  <head>
    <title>base要素の例</title>
    <base href="http://www.example.org/deep/">
  </head>
  <body>
    <p><a href="some-file.html">関連リンク</a></p>
    <!-- 上記のリンクを解決すると下記のようになります -->
    <p><a href="http://www.example.org/deep/some-file.html">関連リンク</a></p>
  </body>
</html>

こちらの例ではbase要素より下に書かれている要素のみが影響を受けています。

<head>
  <title>base要素の例</title>
  <link href="my-style.css" rel="stylesheet">
  <base href="http://example.com">
  <link href="my-other-style.css" rel="stylesheet">
  <!--
    [current domain and directory]/my-style.css
    http://example.com/my-other-style.css
    のように解釈されます。
  -->
</head>

こちらの例では複数のbase要素を記述していますが、無視されています。

<head>
  <title>base要素の例</title>
  <base href="http://example.com">
  <base target="_blank">
  <base href="http://webplatform.org" target="_top">
  <!--
    base要素の定義は1つにまとめられます:
    <base href="http://example.com/" target="_blank">
    例外として、Internet Explorerでは最初の要素のみが有効になります:
    <base href="http://example.com/" target="_self">
  -->
</head>

Notes

  • Firefox 4とInternet Explorer 10は<base>要素に相対URLを指定することができます。これにより相対URLで相対URLを解釈することができます
    (訳注:その他のブラウザも対応しているようです)。
  • <base>はそれよりも下で記述した要素に対してのみ有効です。
  • 複数の<base>を宣言するのは不正で、それぞれ最初のhreftargetのみが使用され、残りは破棄されます。Internet Explorer一番最初に書かれた<base>しか読んでくれません。

インラインSVGで使われるfill="url(#element-id)"のような参照は<base>を使ったドキュメントでは問題になります。url(#element-id)で正しいURLが取得されますが、CSS セレクターでは正しく認識されません。 最新のFirefox とChrome ではその影響を非常に受けやすくなっています。

Related specifications

HTML 5.1
W3C Working Draft
HTML 5
W3C Recommendation
HTML 4.01
W3C Recommendation

See also

External resources