HTML & CSS - base タグ
基本的な使い方
base タグはページ内にある相対パスの基準となる URL を指定するときに使用します。基準となる URL は href 属性で指定します。
例えば https://murashun.jp のページ上で <a href="/about"> と相対パスを指定しても、リンク先は https://murashun.jp/about になります。しかし base タグを使うことで、別の URL を指定することができます。
<!-- 基準の URL を example.com に指定 -->
<base href="https://example.com">
<!-- リンク先は https://example.com/about -->
<a href="/about"> about </a>base タグの基本的な書き方
上記の例では https://murashun.jp のページ上でも base タグで相対パスの基準となる URL に https://example.com を指定することで、リンク先が https://example.com/about と同じ意味になります。
また、base タグで href 属性を指定する場合は、他の要素で URL が指定されているものより前に記述する必要があります。href 属性で指定された基準となる URL が有効になるのは、base タグより後に書かれたリンクだけになります。
target 属性の変更
base タグに target 属性を指定することで、ページ内にあるすべてのリンクに反映されるようになります。ただし、リンクタグに target 属性が指定されている場合は、そちらが優先されます。
<base target="_blank">
<!-- リンク先は新しいタブで開かれる（base タグの target 属性値が適用される） -->
<a href="/about"> about </a>
<!-- リンク先は同じタブで開かれる（リンクタグの target 属性値が適用される） -->
<a href="/about" target="_self"> about </a>target 属性の変更
ただし、ページ内にあるすべてのリンクを新しいタブで開く場合、セキュリティ上の問題があります。詳細はHTML & CSS - a タグを参照してください。
使用上の注意
base タグは、メタデータ要素であるため、head タグ内に記述します。
<head>
<meta charset="utf-8">
<base href="https://example.com">
</head>
base タグは head タグ内に記述する
複数の base タグを記述した場合
base タグは、同じページ内にひとつだけ配置できます。もしも複数の base タグがある場合、一番最初の base タグが有効になります。
外部リンク
外部リンク
- HTML Standard - 4.2.3 The base elementhttps://html.spec.whatwg.org/multipage/semantics.html#the-base-element