baseタグ 👉 基準となるURLを指定

<base>ベースタグを使うことで、HTML文書内に含まれるすべての相対パスの基準URLを変えることができます。

baseタグの使い方

基準URLを変える(href)

例えばhttp://hoge.comというWebページ上で<a href="/about">About</a>という相対パスのリンクを貼るとします。このリンクをクリックすると通常はhttp://hoge.com/aboutへ飛びます。

<base>を使うことで、このリンク先のURLを別のURL/aboutに変えることができます。

👩‍💻https://hoge.com上のページ
<!-- 基準URLをgithub.comに -->
<base href="https://github.com/">

<!-- リンク先はhttps://github.com/about -->
<a href="/about">About</a>

👆hoge.com上のページですが、<base>href属性にgithub.comにしています。これにより<a href="/about">は実質<a href="https://github.com/about">と同じ意味になります。

<base>href属性が影響を与えるのは相対パスに対してのみです。絶対パス(例:<a href="https://hoge.com">リンク</a>)には影響を与えません。

リンクのtarget属性を変える

<base target="_blank">

<!-- 👇リンク先は新しいタブで開かれる(baseのtargetが反映) -->
<a href="/about">About</a>

<!-- 👇同じタブで開かれる(baseのtargetは無視) -->
<a href="/about" target="_self">About</a>

👆<base>target属性を指定すると、その内容がページ内のリンクに反映されるようになります。ただし、リンクタグにtarget属性が記載されている場合はそちらが優先されます。

😺「ページ内のリンクをどれも新しいタブで開くようにしたい」という場合に便利ですが、ユーザビリティとセキュリティの観点から推奨できません。

<base href="https://example.com" target="_blank">

👆もちろんhreftargetを同時に指定することもできます。

HTMLのheadタグ内で使う

<head>
  <meta charset="utf-8">
  <base href="http://hoge.com">
</head>

<base>はメタデータ要素であるため、headタグ内に配置します。ブラウザ上に内容が表示されるものではありません。

baseは他のリンクより先に配置する

<base>要素にhref属性を指定する場合は、相対URLが指定されている他の要素より前に配置する必要があります。

🙅OGPタグなどでは使えない

<meta property="og:url" content="https://example.com/post1" />
<meta property='og:image' content='https://example.com/image.png' />

👆ブラウザは<base>を処理してくれますが、外部サービスが<base>の内容を理解して相対パスを処理してくれるとは限りません。OGPタグには完全なURL(絶対パス)を指定するようにしましょう。

複数のbaseタグを置くことはできない

<base>タグは1つのHTMLページに1つだけ配置できます。もし複数あった場合は、その中の先頭の<base>の内容が反映されます。

baseタグのブラウザ対応

主要なモダンブラウザ全てで使用できます(ブラウザーの対応)。