base
Summary
<base>は文書の基準となるURLを明示し、文書内の相対URLを解決するために使用します。.
Overview Table
| Permitted contents | *なし* |
|---|---|
| Permitted parents | [``](/html/elements/head)タグ内で1度のみ許可されています。 |
リンク(<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>を宣言するのは不正で、それぞれ最初のhrefとtargetのみが使用され、残りは破棄されます。Internet Explorer一番最初に書かれた<base>しか読んでくれません。
注 インラインSVGで使われるfill="url(#element-id)"のような参照は<base>を使ったドキュメントでは問題になります。url(#element-id)で正しいURLが取得されますが、CSS セレクターでは正しく認識されません。 最新のFirefox とChrome ではその影響を非常に受けやすくなっています。