＜base要素＞ - 基準となるURL

公開日: 2017/02/08

base要素は、HTMLドキュメントの基準となるURLを指定するための要素です。そのドキュメント上にある相対パスは、このURLを基準に計算されるようになります。

概要

名前: base
カテゴリー: Metadata content
配置できる場所: head要素の中。base要素が2つ以上あってはいけない。
コンテンツモデル: 空要素のため、子ノードを持ちません。
タグの省略: 省略できません。
DOM Interface: HTMLBaseElement
仕様書: https://html.spec.whatwg.org/multipage/semantics.html#the-base-element

属性

href

基準となるURL。相対パスで指定してもいい。

target

そのページでリンクを開く時の、target属性のデフォルトとなる値。ブラウジングコンテキストの名前、またはキーワードで指定する。

_blank: 新しいウィンドウで開く。
_parent: 1つ親のブラウジングコンテキストで開く。親がない場合は_selfと同じ。
_self: 同じブラウジングコンテキストで開く。初期値。
_top: 最上位の祖先のブラウジングコンテキストで開く。親がない場合は_selfと同じ。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

例えば、a要素のhref属性に相対パスを指定した場合、現在位置を基準として移動先が決まります。

相対パスの計算

<!-- 現在位置: https://syncer.jp/index.html -->

<a href="./index2.html">リンク</a>

<!-- リンクの移動先: https://syncer.jp/index2.html -->

base要素のhref属性にURLを指定すると、ブラウザは現在位置ではなく、このURLを基準に相対パスの移動先を計算するようになります。

base要素

<base href="https://syncer.jp/hoge/">

base要素の働き

<!-- 現在位置: https://syncer.jp/index.html -->

<a href="./index2.html">リンク</a>

<!-- リンクの移動先: https://syncer.jp/hoge/index2.html -->

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<base target="_blank">
		<title>【デモ】＜base要素＞ - 基準となるURL</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/base/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>base要素のtarget属性に<code>_blank</code>を指定したので、このページのリンクはデフォルトで新しいウィンドウで開くようになります。</p>

<p><a href="https://syncer.jp/">SYNCERにアクセス</a></p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base target="_blank"> <title>【デモ】＜base要素＞ - 基準となるURL</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/base/"> </head> <body>

<p>base要素のtarget属性に<code>_blank</code>を指定したので、このページのリンクはデフォルトで新しいウィンドウで開くようになります。</p> <p><a href="https://syncer.jp/">SYNCERにアクセス</a></p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>