【Web基礎】ベースURIの仕組みとは？リソースからの解釈と明示的指定の方法を解説

投稿日: 2025年06月27日

Tips

要約

ベースURIは相対URIの解釈に欠かせない要素であり、取得元URIを基準に相対パスを解決する。
HTML内で<base>タグを使用することで、明示的にベースURIを指定することができ、これにより相対URIが正しく機能する。
ベースURIの理解はリンク設計やWebページの構造理解に役立ち、次回はURIにおける「文字」の扱いについて解説する。

音声で記事を再生

はじめに

前回、URIにおける絶対パスと相対パスについての内容でした。
今回はその続きとして、「ベースURI」 の考え方と、HTMLで明示的にベースURIを指定する方法（<base>タグなど） を詳しく見ていきます。
相対URIの解釈に欠かせないベースURIの仕組みを理解することで、より正確なリンクの設計やWebページの構造理解につながります。

リソースのURIをベースURIとする方法

相対URIを解釈する際、そのURIが記述さていたリソースの取得元のURIをベースURIとするのは、ごく自然で直感的な方法です。
例えば、あるHTMLファイルを取得し、その中に<img src="image.png">のような相対パスが含まれていた場合、ブラウザ(クライアント側)はそのHTMLファイルの取得元URIを基準にして、"image.png"の絶対パスを解決します。

この方法は直感的で分かりやすい反面、取得元のURI情報が失われた場合に相対URIを解決できなくなるという問題があります。
例えば、WEBページをローカルにHTMLファイルとして保存した場合、そのファイルがもともとどのURIで取得されたものなのか分からなくなると、相対URIが正しく機能しなくなってしまいます。

ベースURIを明示的に指定する方法

先ほどの問題を解決する方法の一つが、HTML内で明示的にページURIを指定する方法です。
HTMLの場合は、<head>要素の中に<base>要素を入れます。

当時の（XML的な）記述方法の例

<html xmlns="http://www.w3.org/1999/xhtml" xml:base="http://example.com/docs/">
  <head>
    <title>Sample XHTML Document</title>
  </head>
  <body>
    <a href="page.html">リンク</a>
  </body>
</html>

XMLの場合は、xml:base属性を利用すれば、どの要素でもベースURIを指定できます。

現代のHTMLでの書き換え（HTML5 準拠）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Sample HTML Document</title>
    <base href="http://example.com/docs/">
  </head>
  <body>
    <a href="page.html">リンク</a>
  </body>
</html>