HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<base>
文書内のすべての相対URLの基準となるURL、または、ハイパーリンクのデフォルトのターゲットフレームを指定する要素です。
info
概要
<base> 要素は、HTML文書内のすべての相対URL（画像のsrc、リンクのhrefなど）の基準（ベース）となるURLを指定します。また、すべてのリンクのデフォルトのターゲット（新しいタブで開くなど）も指定できます。
この要素は**必ず** <head> 内に配置され、文書全体で一つだけ指定可能です。
play_circle
デモ (静的表示)
HTML (Source)
<base href="https://search3958.github.io/" target="_blank">
<!-- ここにbase要素があると仮定し、body内の要素を表示 -->
<a href="html/abbr.html">
abbr要素への相対リンク
</a>
<br><br>
<a href="https://google.com" target="_self" class="button-link">
ベースを上書きするリンク
<!-- このリンクは新しいタブではなく現在のタブで開かれる -->
</a>
Preview (Result)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| href | 文書内のすべての相対URLの基準となるベースURLを指定します。 |
| target | すべてのハイパーリンクのデフォルトのターゲットフレームを指定します。_self: 現在のタブ（デフォルト）_blank: 新しいタブまたはウィンドウ_parent: 親フレーム_top: 最上位のウィンドウ
|
code
実用例
1. ベースURLの指定
<head>
<base href="https://cdn.example.com/assets/">
...
</head>
<body>
<img src="images/logo.png" alt="ロゴ"> <!-- 実際は https://cdn.example.com/assets/images/logo.png が参照される -->
</body>
2. 全てのリンクを別タブで開く設定
<head>
<base target="_blank">
...
</head>
<body>
<a href="page1.html">デフォルトで新しいタブで開く</a>
<!-- target属性で指定すれば
3. hrefとtargetの同時指定
<head>
<base href="https://docs.example.com/v2/" target="_blank">
</head>
lightbulb
知っておくべき重要事項
security
配置に関する制限
<base> 要素は**必ず** <head> 要素の内部に配置しなければなりません。また、文書内に <base> 要素を複数含めることはできません。複数ある場合は、最初のものが使用され、残りは無視されます。
accessibility_new
相対URLへの影響
<base href="..."> を設定すると、スクリプトやスタイルシートを含む、ページ上の**すべての**相対URLに影響を与えます。意図しないリソースの読み込みエラーやリンク切れを防ぐため、相対パスを使用するすべての要素（<link>, <script>, <img>など）の挙動を完全に理解してから使用してください。