【HTML】base 要素の使い方｜相対URLの基準とリンクの開き方を一括指定する

HTML でリンクや画像を相対URL（images/logo.png のようにドメインから書かないパス）で書いたとき、その基準がどこになるかを決めているのが base 要素です。あまり目立たない要素ですが、ページ内すべての相対URLの起点を1か所で指定でき、さらにリンクの既定の開き方（同じタブか新しいタブか）もまとめて設定できます。この記事では、base 要素の基本的な使い方、相対URLがどのように解決されるか、そして扱う際のつまずきポイントまで、初心者〜中級者向けに解説します。

base 要素とは何か

base 要素は、そのページに含まれる相対URLの「基準URL」と、リンク・フォームの「既定の開き先（target）」を指定する要素です。head の中に書き、ページ全体に影響します。指定できる属性は次の2つです。

属性	説明
`href`	ページ内の相対URLを解決する基準となるURL
`target`	リンクやフォーム送信の既定の開き先（`_self` / `_blank` など）

base 要素は終了タグを持たない空要素で、href と target の少なくとも一方を指定して使います。重要な制約として、1つのページに置けるのは1つだけです。

href で相対URLの基準を指定する

href に基準URLを指定すると、ページ内のすべての相対URL（リンク、画像、CSS など）がそのURLを起点に解決されます。次の例を見てください。

index.html

<head>
  <base href="https://example.com/docs/">
</head>
<body>
  <!-- https://example.com/docs/intro.html に解決される -->
  <a href="intro.html">はじめに</a>

  <!-- https://example.com/docs/img/logo.png に解決される -->
  <img src="img/logo.png" alt="ロゴ">
</body>

base の href に https://example.com/docs/ を指定したので、intro.html は https://example.com/docs/intro.html、img/logo.png は https://example.com/docs/img/logo.png として扱われます。base が無ければ、これらは実際にそのページが置かれている場所を基準に解決されます。多数の相対URLを持つページで、基準を一箇所にまとめて管理したいときに役立ちます。

末尾のスラッシュで結果が変わる

href の末尾にスラッシュ（/）があるかどうかで、相対URLの解決結果が変わります。ここは間違えやすいところなので、具体例で確認します。

base の href	相対URL	解決されるURL
`https://example.com/docs/`	`intro.html`	`https://example.com/docs/intro.html`
`https://example.com/docs`	`intro.html`	`https://example.com/intro.html`

末尾にスラッシュがある https://example.com/docs/ では、docs がフォルダとして扱われ、その中の intro.html になります。一方、スラッシュが無い https://example.com/docs では、docs がファイル名のように扱われ、それを差し替える形になるため https://example.com/intro.html になります。フォルダを基準にしたいときは、末尾のスラッシュを忘れないようにしてください。

target でリンクの開き方を一括指定する

target 属性を指定すると、ページ内のリンクやフォームの既定の開き先をまとめて設定できます。たとえば target="_blank" にすると、個々の a 要素に target を書かなくても、すべてのリンクが新しいタブで開くようになります。

target.html

<head>
  <base target="_blank">
</head>
<body>
  <!-- target を書かなくても新しいタブで開く -->
  <a href="https://example.com">サイトA</a>
  <a href="https://example.org">サイトB</a>

  <!-- 個別に指定すれば base より優先される -->
  <a href="/about" target="_self">このタブで開く</a>
</body>

base に target="_blank" を指定したので、サイトA・サイトBへのリンクはどちらも新しいタブで開きます。個々のリンクに target を書いた場合は、そちらが base の指定より優先されます。「このリンクだけは同じタブで開きたい」という例外は、target="_self" のように個別指定で上書きできます。

使うときに気をつけること

ページに1つだけ、なるべく先頭に置く

base 要素は1ページに1つしか置けません。複数書いても最初の1つだけが有効になります。また、base は自分より後ろに書かれた相対URLに作用するため、head の中でも、他の相対URLを使う要素（link による CSS 読み込みなど）より前に書くのが安全です。後ろに置くと、それより前の相対URLには効かないことがあります。

ページ内リンク（アンカー）に影響する

base href を指定すると、#section1 のようなページ内リンク（アンカー）も基準URLを起点に解決されます。その結果、同じページ内の見出しへ飛ばしたつもりが、base で指定した別のURLへ移動してしまうことがあります。ページ内リンクを使っているサイトで base href を入れるときは、アンカーの挙動が変わっていないか必ず確認してください。

target=”_blank” では安全性にも配慮する

base target="_blank" ですべてのリンクを新しいタブで開く場合、外部サイトへのリンクが多いと、開いた先のページから元のページを操作されるリスクに注意が必要です。個々のリンクでは rel="noopener" を付けて対策しますが、base の target にはこうした rel の一括指定はありません。外部リンクが多いページで安全性を重視するなら、base で一括指定するより、各 a 要素に target と rel="noopener" を個別に書くほうが確実です。

まとめ

base 要素は、head 内に1つだけ置ける要素で、href でページ内の相対URLの基準を、target でリンクやフォームの既定の開き先をまとめて指定できます。href は末尾のスラッシュの有無で解決結果が変わり、target="_blank" は個別のリンク指定で上書きできます。一方で、ページ内リンク（アンカー）の挙動が変わる、rel="noopener" を一括指定できないといった注意点もあります。相対URLの基準を一箇所で管理したいときに便利な要素ですが、影響範囲が広いぶん、導入後は既存のリンクや画像が正しく表示・遷移するかを確認して活用してみてください。