HTML

It is used to set the base URL for all relative URL links in the page and the default target for opening links.

base 要素

　この要素は、Webページ上のすべてのリンクの出発点を設定するために使います。

　Webページにはたくさんのリンクがありますね。これらのリンクは、ページ内の他の場所や、インターネット上の他のページへの道しるべのようなものです。base要素を使うことで、これらのリンクがどの地点からスタートするかを一括で設定できます。特に、Webサイトがたくさんのページを持っていて、それらのページから共通の外部サイトへリンクをたくさん張りたい場合に便利です。

　base要素は、通常、HTMLの headセクション内に書かれます。この要素で設定できるのは大きく２つのことです。１つは、リンクの基準となる URL（ウェブアドレス）で、もう１つは、リンクをクリックしたときにそのリンクがどのように開かれるか（例えば、新しいタブで開くか、同じウィンドウで開くか）を指定することです。

　ただし、base要素を使う時は注意も必要です。なぜなら、１つのページ内で設定できる base要素は１つだけであり、この設定はページ上の全てのリンクに影響を与えるからです。したがって、一つ一つのリンクの出発点や開き方を細かくコントロールしたい場合には、base要素の使用は適していないかもしれません。

　簡単に言えば、base要素は Webページの「リンクの基本設定」のようなものです。これを上手に使うことで、Webページの管理がずっと楽になり、訪れる人にとってもより良い体験を提供できるようになります。

　例えば、以下のように記述します。

HTML

<head>
	<base href="https://example.com/">
</head>

　この場合、すべての相対URLは "https://example.com/" を基準として解釈されます。例えば、以下のような a要素があるとします。

HTML

<a href="/about">About</a>

　この a要素は、https://example.com/about にリンクすることを意味します。

　base要素より前に現れるハイパーリンクには作用しませんので、注意してください。

　また、base要素をドキュメントに２つ以上入れてはいけません。もし２つ以上の base要素が存在している場合は、最初の base要素のみが適用され、それ以降の base要素は無視されることとなっています。

　なお、この要素は空要素です。そのため、終了タグを入れてはいけません。

　また、base要素には target属性も指定できます。target属性を指定すると、リンク先のページがどのようなターゲットで表示されるかを指定することができます。target属性に指定できる値には、_self、_blank、_parent、_topなどがあります。

HTML

<head>
	<base href="https://example.com/" target="_blank">
</head>

　この場合、すべてのリンクが新しいウィンドウで開かれます。

target属性

　HTMLの base要素の target属性は、ページ内の全てのリンクがどのように開かれるかを一括で指定するために使います。この属性にはいくつかの選択肢があり、それぞれがリンクを開く際の動作を異なる方法で設定します。

_self: この設定を使うと、リンクは現在のウィンドウやタブで開きます。つまり、今見ているページの上に新しいページが表示されます。これは、特に指定しない場合のデフォルトの振る舞いです。
_blank: リンクが新しいウィンドウやタブで開くようにします。これは、訪問者がサイトを離れずに、別のページを同時に見ることができるようにする時に便利です。
_parent: この属性は、リンクが現在のフレームの親フレームで開かれるようにします。フレームを使っていない場合、または親フレームが存在しない場合は、このオプションの効果は _self と同じになります。
_top: リンクをブラウザの全画面で開きます。もしページがフレームセット内にある場合、_top を使用するとフレームセット全体が置き換えられます。これにより、フレームを完全にバイパスしてページを開くことができます。

　これらの属性を base要素の target属性に設定することで、ページ内の全てのリンクに対して、どのウィンドウやタブで開くかを一括で指示することができます。例えば、あなたが作ったサイトの全ての外部リンクを新しいタブで開きたい場合、<base target="_blank"> と書くことで、一つ一つのリンクに個別に target="_blank" を追加する手間を省くことができます。

　このように、base要素の target属性を使うと、サイトの使いやすさを向上させることができるので、とても便利な機能です。ただし、使い方には注意が必要です。なぜなら、この設定はページ内のすべてのリンクに影響を及ぼすからです。適切に使用することで、訪問者にとってより良いブラウジング体験を提供できます。

Sample

　あなたが運営するブログサイトでは、すべての記事が同じドメイン下の /articles/ ディレクトリに保存されているとします。また、サイト内の外部リンクは全て新しいタブで開くようにしたいと考えています。ここで、base要素を使って、リンクの基本URLを設定し、デフォルトのターゲットを _blank に設定することができます。

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>あなたのブログ</title>
		<!-- すべての相対URLの基準を /articles/ に設定し、リンクを新しいタブで開く -->
		<base href="https://www.yoursite.com/articles/" target="_blank">
	</head>
	<body>
		<h1>ブログ記事のタイトル</h1>
		<p>ここに素晴らしいコンテンツが入ります。</p>

		<!-- 相対URLリンク; 実際には https://www.yoursite.com/articles/another-article.html からリンクされます -->
		<a href="another-article.html">別の記事を読む</a>

		<!-- 外部リンク; 新しいタブで開きます -->
		<a href="https://www.example.com">外部サイトを訪れる</a>
	</body>
</html>

　このコードでは、<base href="https://www.yoursite.com/articles/" target="_blank"> 行が重要な役割を果たします。この行により、ページ内のすべての相対URLが https://www.yoursite.com/articles/ を基準に解決されます。また、target="_blank" により、このページにあるすべてのリンクが新しいタブで開かれるようになります。これにより、サイト全体で一貫した動作を簡単に適用することができます。