kento
【Web基礎】ベースURIの仕組みとは？リソースからの解釈と明示的指定の方法を解説
2025年06月27日
Tips
要約を生成中...
前回、URIにおける絶対パスと相対パスについての内容でした。
今回はその続きとして、「ベースURI」 の考え方と、HTMLで明示的にベースURIを指定する方法（<base>タグなど） を詳しく見ていきます。
相対URIの解釈に欠かせないベースURIの仕組みを理解することで、より正確なリンクの設計やWebページの構造理解につながります。
関連記事もご覧ください。
相対URIを解釈する際、そのURIが記述さていたリソースの取得元のURIをベースURIとするのは、ごく自然で直感的な方法です。
例えば、あるHTMLファイルを取得し、その中に<img src="image.png">のような相対パスが含まれていた場合、ブラウザ(クライアント側)はそのHTMLファイルの取得元URIを基準にして、"image.png"の絶対パスを解決します。
この方法は直感的で分かりやすい反面、取得元のURI情報が失われた場合に相対URIを解決できなくなるという問題があります。
例えば、WEBページをローカルにHTMLファイルとして保存した場合、そのファイルがもともとどのURIで取得されたものなのか分からなくなると、相対URIが正しく機能しなくなってしまいます。
先ほどの問題を解決する方法の一つが、HTML内で明示的にページURIを指定する方法です。
HTMLの場合は、<head>要素の中に<base>要素を入れます。
<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を指定できます。
<!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>現代のHTML（HTML5）では、<base> タグを <head> 内に記述することで、ベースURIを明示的に指定します。
相対URIの背後にある「ベースURI」という概念を理解することで、リンクやリソースの指定がより正確に行えるようになります。
特に、HTMLで <base> タグを用いたベースURIの明示的な指定は、ページ構造を制御するうえで重要です。
次回は、URIにおける「文字」の扱いに焦点を当て、エンコーディングなどの部分を見ていきましょう！
要約
コメント
まだコメントはありません。
本気で学ぶなら、ShiftB
本気で学ぶなら、ShiftB
