HTML <base> href 属性

HTML <base> タグ

定義と使用法

href 属性は、ページ上のすべての相対的な URL のベース URL を指定します。

説明

base 要素は、HTML ドキュメント内の相対的なリンクがその上で解析されるようにベースの URL を設定するために使用されます。

相対的なリンクは URL のプロトコル、ホスト、ポートの部分を省略しており、他の URL（base で指定された URL または現在のドキュメントの URL）に基づいて完全な形式を導き出す必要があります。

href 属性は、ドキュメントの後半部分の相対的な URL がどのベース URL を使用するかを指定します。

例

例 1

ページ上のすべての相対的な URL にベース URL を指定します：

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.codew3c.com/i/photo/">
</head>
<body>
<h1>base href 属性</h1>
<img src="flower.png" width="60" height="60" alt="tullip">
</body>
</html>

自分で試してみてください

例解

この例ではベース URL を https://www.codew3c.com/i/photo/ に設定しています。www.codew3c.com はホストのドメインであり、/i/photo/ はサーバー上に写真ファイルが含まれるディレクトリです。

ドキュメントの後半部分には画像を参照する img 要素があります。その要素は flower.png という相対的な URL を使用しています。ブラウザが画像をロードするとき、ベース URL と相対的な URL を結合して完全な URL を生成します：

https://www.codew3c.com/i/photo/flower.png

例 2

ページ上のすべての相対的な URL にベース URL を指定します：

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.codew3c.com/html/">
</head>
<body>
<h1>base href 属性</h1>
<a href="html_basic.asp">HTML 基礎</a>
</body>
</html>

自分で試してみてください

例解

この例ではベース URL を https://www.codew3c.com/html/ に設定しています。www.codew3c.com はホストのドメインであり、/html/ はサーバー上に写真ファイルが含まれるディレクトリです。

ドキュメントの後半部分にはリンクを生成するための a 要素があります。その要素は、html_basic.asp という相対的な URL を使用しています。ユーザーがこのハイパーリンクをクリックすると、ブラウザがベース URL と相対的な URL を結合して完全な URL を生成します：

https://www.codew3c.com/html/html_basic.asp

ヒント

base 要素を使用しない場合、またはその href 属性を使用してベース URL を設定しない場合、ブラウザは現在のドキュメントの URL をすべての相対 URL の解釈基準として認定します。

例えば、ブラウザが https://www.codew3c.com/js/index.asp この URL からドキュメントをロードし、そのドキュメントには html_basic.asp という相対 URL が含まれていると仮定すると、この相対 URL がクリックされた場合、ブラウザは https://www.codew3c.com/js/html_basic.asp という絶対 URL から第二のドキュメントをロードしようとします。

文法

<base href="URL">

属性値

値 説明
URL ベース URL としての絶対 URL（例えば「http://www.example.com/」）。

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート

HTML <base> タグ