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 タグが有効になります。

外部リンク

外部リンク