baseタグを使ってHTML内のリンクやリソースの基準URLを指定する方法をわかりやすく解説

INDEX

baseタグの概要

ドキュメント内のリンクの基準URLを指定 HTMLタグ

<base href=”基準URL” target=”リンクの開き方”>

概要 baseタグは、HTMLドキュメント内のすべての相対URLの基準（ベース）となるURLを指定するためのタグです。通常は<head>内に記述し、ページ内のすべてのリンクやリソースのURLに影響を与えます。

属性	説明	使用例
`href`	基準となるURLを指定する	`<base href="https://www.example.com/">`
`target`	リンクの開き方を指定（`_self`, `_blank`, `_parent`, `_top`）	`<base target="_blank">`

HTML内のすべての相対パスを特定の基準URLに統一できます。

https://www.example.com/about.html　となります。

<head>
  <base href="https://www.example.com/">
</head>
<body>
  <a href="about.html">会社概要</a>
  <img src="images/logo.png" alt="ロゴ">
</body>

すべてのリンクを新しいタブで開く場合、target="_blank" を指定できます。

<head>
  <base href="https://www.example.com/" target="_blank">
</head>
<body>
  <a href="services.html">サービス紹介</a>
</body>

1つのHTMLファイルに1回のみ使用可能: baseタグを複数指定すると、最初に記述されたものだけが適用される。
外部サイトの相対URLに影響する可能性: すべての相対URLに適用されるため、意図しない影響を与えないよう注意する。
target=”_blank” の使用は慎重に: セキュリティ上の理由から、外部リンクを開く際はrel="noopener noreferrer"を併用するとよい。
JavaScriptで変更不可: 一度設定すると、JavaScriptで変更することはできない。

Q: baseタグを指定すると、すべてのリンクに影響しますか？: A: はい、HTML内のすべての相対URLに適用されます。
Q: 複数のbaseタグを指定できますか？: A: いいえ、HTMLドキュメント内に1つだけ使用できます。複数指定すると、最初のbaseタグのみが適用されます。
Q: baseタグを削除するとどうなりますか？: A: 相対URLのリンクやリソースは、HTMLファイルが配置されているディレクトリを基準として解釈されます。