HTML5における<base>タグの使い方

<base>タグは、HTMLファイル内で基準(ベース)となるURLを指定するタグです。絶対URLともいわれるものです。今回は、HTML5における<base>タグの使い方をご紹介します。

HTML5における<base>タグの使い方

<base>タグは、メタデータ・コンテンツの1つで、<head>〜</head>内に記述します。head要素内でリンクが設置されている場所より前に記述して使用します。<head>内には、1つの<base>タグしか利用できず、2つ以上記述した場合は2番目以降の記述は無視されます。

<head>
<title>テストです。</title>
<link rel="stylesheet" href="test1.css" type="text/css" />
<base href="http://www.test.com/index.html">
</head>

このような記述を行って、本文に<a href="test/01.html">のようなリンクを設置した場合、http://www.test.com/(index.html)/test/01.htmlのようなリンク先になることになります。

<base>タグ以前のリンクは<base>の影響を受けないので、絶対URLは関係なく、HTMLファイルが設置されているディレクトリ内のリンクになります。

<base>タグの2種類の属性について

href属性

href属性には基準となる URL を指定します。リンクのパスに関しては、上記のサンプルのようになります。

target属性

<head>
<title>テストです。</title>
<link rel="stylesheet" href="test1.css" type="text/css" />
<base target="abc">
</head>

target属性を指定すると、影響を受ける全てのリンクの開く場所が指定されます。上記の例では、基準ターゲットを abcに設定していますので、そのページ中にあるリンクをクリックすると、それらはすべて、abc という名前のウィンドウ(フレーム)に表示されます。


イベント

2017/10/06(金)
UX School(全10回)