【HTML Living Standard】base要素の使い方
base要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
baseオブジェクトは、HTMLドキュメント内で相対URLの基準となるベースURLを設定する役割を持つオブジェクトです。この要素は必ずHTMLドキュメントの<head>セクション内に一つだけ配置されます。
base要素でhref属性にURLを指定すると、そのドキュメント内のすべての相対URL（例えば、<a href="page.html">、<img src="image.png">、<link href="style.css">、<script src="script.js">など）は、この指定されたURLを基準として解決されるようになります。これにより、ドキュメント内のさまざまなリソースへのパスを一元的に管理し、記述を簡潔に保つことができます。
また、base要素はtarget属性も持ち、これを使用することで、ドキュメント内のすべてのハイパーリンクのデフォルトのターゲットブラウジングコンテキスト（リンクをクリックしたときに新しいタブやウィンドウで開くかどうかなど）を一括して設定することが可能です。
base要素は、Webサイトの構造が複雑であったり、ドキュメントが移動する可能性がある場合などに特に有用です。ただし、この要素で指定されたベースURLは相対URLにのみ適用され、絶対URLで記述されたリソースへのパスには影響を与えません。適切な利用により、HTMLコードの可読性と保守性を高めることができます。
構文(syntax)
1<base href="https://www.example.com/docs/" target="_blank">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML baseタグでURLとリンク先をまとめて指定する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML baseタグのサンプル</title> 7 <!-- 8 <base>タグは、このドキュメント内のすべての相対URLの基準URIと、 9 すべてのリンクのデフォルトのターゲットを指定します。 10 <head>要素内に1つだけ配置できます。 11 --> 12 <base href="https://www.example.com/docs/" target="_blank"> 13</head> 14<body> 15 <h1>baseタグの影響を見る</h1> 16 17 <p> 18 以下のリンクは、<base>タグの<code>href</code>属性に基づいて解決されます。 19 また、<code>target="_blank"</code>の影響で新しいタブで開きます。 20 </p> 21 <!-- <base href="https://www.example.com/docs/"> が基準となるため、 22 "page1.html" は "https://www.example.com/docs/page1.html" と解決されます。 --> 23 <a href="page1.html">ページ1へのリンク</a> 24 25 <p> 26 以下の画像も、<base>タグの<code>href</code>属性に基づいて解決されます。 27 </p> 28 <!-- <base href="https://www.example.com/docs/"> が基準となるため、 29 "images/sample.jpg" は "https://www.example.com/docs/images/sample.jpg" と解決されます。 --> 30 <img src="images/sample.jpg" alt="サンプル画像" width="100"> 31 32 <p> 33 このリンクは絶対URLですが、<base>タグの<code>target</code>属性の影響を受け、新しいタブで開きます。 34 </p> 35 <a href="https://www.google.com/">Googleへのリンク</a> 36 37 <p> 38 このリンクは、明示的に<code>target="_self"</code>を指定しているため、 39 <base>タグの<code>target</code>属性を上書きし、現在のタブで開きます。 40 </p> 41 <a href="https://www.wikipedia.org/" target="_self">Wikipediaへのリンク (現在のタブで開く)</a> 42</body> 43</html>
HTMLのbaseタグは、ウェブページ内のすべての相対的なURLの基準となるアドレスと、リンクのデフォルトの開き方をまとめて指定する際に使用されます。このタグは必ず<head>要素内に一つだけ記述します。
主な属性としてhrefとtargetがあります。href属性には、このドキュメント内で使われる相対パスのURLが解決されるための基準アドレスを設定します。例えば、サンプルコードで<base href="https://www.example.com/docs/">と設定されている場合、<a href="page1.html">のようなリンクは「https://www.example.com/docs/page1.html」という完全なURLとして扱われます。これにより、ドキュメント全体で共通の基準を簡単に管理できるようになります。
次にtarget属性は、ページ内のすべてのリンクがクリックされたときに、どこで開かれるかのデフォルト動作を指定します。target="_blank"と設定すると、特に指定がない限り、すべてのリンクが新しいタブで開かれるようになります。これにより、ユーザーが現在のページから離れることなく他の情報を閲覧できるようになります。
ただし、特定のリンクに対して個別にtarget="_self"などの属性を明示的に指定することで、baseタグで設定したデフォルトの動作を上書きし、そのリンクだけ異なる開き方をさせることも可能です。baseタグ自体には引数や戻り値といった概念はありません。
baseタグは、HTMLドキュメント内のすべての相対URLの基準URIと、すべてのリンクのデフォルトのターゲットを一括で設定する要素です。このタグは、必ず<head>要素内に1つだけ配置してください。複数配置すると予期せぬ動作を引き起こす可能性があります。
href属性に指定されたパスは、<a>タグや<img>タグなど、相対パスで記述された全ての要素に影響します。誤ったURLを指定すると、画像が表示されなかったり、リンクが機能しなくなったりするため、設定には十分注意が必要です。
target属性は、明示的に指定がない限り、ページ内のすべてのリンクやフォームが新しいタブで開くか、現在のタブで開くかといった挙動を決定します。ただし、個々のリンクやフォーム要素にtarget属性が設定されている場合は、そちらの設定がbaseタグの設定よりも優先されます。サイト全体の挙動に大きく関わるため、その影響範囲を理解した上で慎重に利用することが大切です。
HTML base要素とbase64埋め込み
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML base要素とbase64埋め込みの例</title> 7 8 <!-- 9 <base>要素は、このHTMLドキュメント内の全ての相対URLの基準URLを指定します。 10 これにより、以降の相対パスは 'https://example.com/assets/' を基準に解決されます。 11 （例: "documents/file.pdf" は "https://example.com/assets/documents/file.pdf" となります） 12 --> 13 <base href="https://example.com/assets/"> 14</head> 15<body> 16 <h1>base要素の利用例</h1> 17 <p> 18 以下のリンクは相対パスで指定されていますが、<base>要素の指定により、 19 実際には <a href="documents/document.pdf">https://example.com/assets/documents/document.pdf</a> 20 へリンクされます。 21 ブラウザの開発者ツールでリンク先を確認してみてください。 22 </p> 23 <p><a href="documents/document.pdf">PDFファイルへのリンク (相対パス)</a></p> 24 25 <h2>base64埋め込みの利用例</h2> 26 <p> 27 以下の画像はbase64エンコードされたデータURIとして、HTMLファイル内に直接埋め込まれています。 28 これは外部ファイルへのHTTPリクエストを発生させず、<base>要素の影響も受けません。 29 </p> 30 <!-- 31 data:image/png;base64,... 形式で画像を直接埋め込んでいます。 32 この画像は外部から読み込まれるのではなく、HTMLデータの一部です。 33 --> 34 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyBlAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="埋め込み画像 (赤ドット)"> 35</body> 36</html>
HTMLの<base>要素は、ウェブページ内の全ての相対URLの基準となるパスを指定する要素です。この要素は通常<head>セクション内に記述され、href属性を用いて基準となるURLを定義します。例えば、サンプルコードのように<base href="https://example.com/assets/"> と記述すると、以降のドキュメント内で指定される相対パス（例: <a>タグのhref属性や<img>タグのsrc属性）は、この指定された基準URLの後に連結され、完全なURLとして解決されます。<base>要素自体にはプログラム的な引数や戻り値の概念はありませんが、href属性がその機能を提供し、ドキュメント全体の相対パス解決に一貫性をもたらします。
一方、base64埋め込みは、画像などのバイナリデータをHTMLファイル内に直接記述する手法です。これはdata:image/png;base64,...のようなデータURI形式で指定され、外部ファイルへのHTTPリクエストを発生させずにコンテンツを表示できます。サンプルコードの<img>タグに見られるように、この方法は外部ファイルを個別に読み込む手間を省き、ウェブページの表示速度を改善する場合があります。base64で埋め込まれたデータはHTMLドキュメントの一部として扱われるため、前述の<base>要素で設定された基準パスの影響を受けません。このように、<base>要素は相対パスの解決基準を一元化し、base64埋め込みは外部リソースへの依存を減らすことで、ウェブコンテンツの記述方法に柔軟性をもたらします。
HTMLの<base>要素は、ドキュメント内の全ての相対URLの基準を変更します。これは<head>内に一つだけ記述し、JavaScriptの動作や既存のライブラリに予期せぬ影響を与えないよう、その影響範囲を十分に理解して使用してください。特にページ内リンク（#で始まるアンカーリンク）との併用時には注意が必要です。
base64での画像埋め込みは、外部へのHTTPリクエストを削減できますが、HTMLファイル自体のサイズを大きくします。ブラウザキャッシュが利用できないため、大きな画像や繰り返し使用するデータには不向きです。小さなアイコンなど、限定的な用途での利用をお勧めします。なお、base64埋め込みデータは<base>要素の基準URLの影響を受けません。