JavaScriptで賢く解決！``タグを使わない相対URLの解決方法

2024-04-12

HTMLの<base>タグ：相対URLをスッキリさせる賢い方法

HTMLの<base>タグは、ページ内の全ての相対URLを解決するための基点となるURLを指定するものです。このタグを使うことで、コードを簡潔に保ち、URL管理を効率化できます。

利点

コードの簡潔化: <base>タグを使えば、全てのリンクに絶対URLを記述する必要がなくなり、コードがスッキリします。
URL管理の効率化: サイトの構造が変わっても、<base>タグを変更するだけで全てのリンクを更新できます。
開発の効率化: テンプレートエンジンと組み合わせることで、開発を効率化できます。

使い方

<base>タグは、<head>要素内に記述します。属性は以下の2つです。

href: 基点となるURLを指定します。
target: リンクを開く場所を指定します。

例:

<head>
  <base href="https://example.com/my-app/">
</head>
<body>
  <a href="index.html">ホーム</a>
  <a href="about.html">会社概要</a>
</body>

上記の例では、<base>タグによって全ての相対URLがhttps://example.com/my-app/を基点として解決されます。つまり、上記のリンクはそれぞれhttps://example.com/my-app/index.htmlとhttps://example.com/my-app/about.htmlに解決されます。

注意点

<base>タグは、ページ内に1つのみ記述できます。
<base>タグは、全ての相対URLに影響を与えるため、使用には注意が必要です。

<base>タグは、XHTML 1.0 Strictでは廃止されていますが、HTML5では復活しています。

<base>タグは、JavaScriptでも操作できます。

関連用語

HTML

相対URL

コンテキストパス

ベースタグ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
  <base href="https://example.com/my-app/">
</head>
<body>
  <h1>サンプルページ</h1>
  <p>このページは、https://example.com/my-app/ を基点としています。</p>
  <a href="index.html">ホーム</a>
  <a href="about.html">会社概要</a>
</body>
</html>

ポイント

<base>タグには、href属性とtarget属性を指定できます。

HTMLの<base>タグの代替方法

XHTML 1.0 Strictでは使用できない: <base>タグは、XHTML 1.0 Strictでは廃止されています。

これらの欠点を克服するために、<base>タグの代替方法として以下の方法が考えられます。

絶対URLを使用する:

全てのリンクに絶対URLを記述することで、<base>タグを使用せずに相対URLを解決できます。ただし、コードが冗長になり、URL管理が煩雑になるという欠点があります。

<a href="https://example.com/my-app/index.html">ホーム</a>
<a href="https://example.com/my-app/about.html">会社概要</a>

JavaScriptを使用して、相対URLを解決することができます。ただし、JavaScriptを有効にしていないブラウザでは動作しません。

<a href="index.html">ホーム</a>
<a href="about.html">会社概要</a>

<script>
  const baseUrl = 'https://example.com/my-app/';

  const links = document.querySelectorAll('a');
  for (const link of links) {
    link.href = baseUrl + link.href;
  }
</script>