base要素 - 基準となるハイパーリンクの情報

2017/02/09

base要素は、基準となるハイパーリンクの情報を設定する要素です。具体的には、URL(href属性)とコンテキスト(target属性)を指定できます。同じドキュメントにある相対URLは、この要素の値を基準に計算されます。また、リンクを開くコンテキストもこの要素の値がデフォルトとなります。

概要

名前: base (Base)
カテゴリ: Metadata content
配置できる場所: head要素の中。base要素が2つ以上あってはいけない。
コンテンツモデル: 子要素を持ちません。
タグの省略: 開始タグも終了タグも省略できません。
コンテンツ属性: href - 基準となる、ハイパーリンクのURL。; target - 基準となる、リンクを開くコンテキスト。
DOM Interface: HTMLBaseElement
仕様書: https://html.spec.whatwg.org/multipage/semantics.html#the-base-element

属性

href属性

HTMLドキュメントにおいて基準となるURL。各ハイパーリンクの相対URLは、ここで指定したURLを基準に算出される。値の指定方法はa要素のhref属性と同じです。

target属性

HTMLドキュメントにおいて基準となる、ハイパーリンクを開くコンテキスト。値の指定方法はa要素のtarget属性と同じです。

グローバル属性

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

チュートリアル

base要素は{{head要素内}}に設置しなければいけません。また、この要素に影響を受ける他の要素よりも前に設置しなければいけません。head要素内の先頭に設置しておけば間違いないでしょう。

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

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

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

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

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

base要素のhref属性にURLを指定すると、現在位置ではなく、この値を基準に相対URLを計算するようになります。

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

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

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

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

target属性も同じ考えです。例えば、ハイパーリンクを開くコンテキストをデフォルトで新しいウィンドウにしたければ、次のように指定できます。

<base target="_blank">

<a href="https://syncer.jp/">リンク</a>

デモ

base要素のデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<base href="https://syncer.jp/" target="_blank" id="hoge">
</head>
<body>
<a href="./Web/">リンク</a>
</body>
</html>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

Features	Chrome	Firefox	Safari	Edge	IE	Opera	iOS Safari	Android
base要素	●	●	●	●	●	●	●	●
href属性	●	●	●	●	●	●	●	●
target属性	●	●	●	●	●	●	●	●

概要

属性

href属性

target属性

グローバル属性

チュートリアル

デモ

サポート状況

関連記事