files/ja/web/html/element/base/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

---
title: '<base>: 文書の基底 URL 要素'
slug: Web/HTML/Element/base
tags:
  - Element
  - HTML
  - HTML 文書メタデータ
  - 'HTML:メタデータコンテンツ'
  - Reference
  - 要素
translation_of: Web/HTML/Element/base
---
<div>{{HTMLRef}}</div>

<p id="Summary"><span class="seoSummary"><strong>HTML の <code>&lt;base&gt;</code> 要素</strong>は、文書内におけるすべての<em>相対</em> URL の基点となる URL を指定します。</span> <code>&lt;base&gt;</code> 要素は、文書内に1つだけ置くことができます。</p>

<p>文書に使われている基底 URL は、スクリプトから {{domxref('document.baseURI')}} を使用して問い合わせることができます。文書に <code>&lt;base&gt;</code> 要素がない場合、 <code>baseURI</code> は既定で {{domxref("location.href")}} になります。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
   <td>メタデータコンテンツ</td>
  </tr>
  <tr>
   <th scope="row">許可されている内容</th>
   <td>なし。この要素は{{Glossary("empty element", "空要素")}}。</td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>終了タグを用いてはならない。</td>
  </tr>
  <tr>
   <th scope="row">許可されている親要素</th>
   <td>他に {{HTMLElement("base")}} 要素を含まない {{HTMLElement("head")}}。</td>
  </tr>
  <tr>
   <th scope="row">暗黙の ARIA ロール</th>
   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
  </tr>
  <tr>
   <th scope="row">許可されている ARIA ロール</th>
   <td>許可されている <code>role</code> なし</td>
  </tr>
  <tr>
   <th>DOM インターフェイス</th>
   <td>{{domxref("HTMLBaseElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">属性</h2>

<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p>

<div class="blockIndicator warning">
<p>以下の属性のいずれかが指定されている場合、この要素は URL の属性値を持つ他の要素の前におかなければ<strong>なりません</strong>。例えば {{HTMLElement("link")}} の <code>href</code> 属性などです。</p>
</div>

<dl>
 <dt>{{htmlattrdef("href")}}</dt>
 <dd>文書全体を通して相対 URL に使用される基底 URL です。絶対 URL と相対 URL が使用できます。</dd>
 <dt>{{htmlattrdef("target")}}</dt>
 <dd><strong>キーワード</strong>または<strong>作者が定義した名前</strong>で既定の{{Glossary("browsing context", "閲覧コンテキスト")}}を表し、 {{HTMLElement("a")}} または {{HTMLElement("form")}} 要素が明示的に <code>target</code> 属性を持たない場合に、移動の結果を表示する先として使用されます。</dd>
 <dd>以下のキーワードは特別な意味を持ちます。
 <ul>
  <li><code>_self</code> (既定値): 同じ閲覧コンテキストに結果を表示します。</li>
  <li><code>_blank</code>: 新しい無名の閲覧コンテキストに結果を表示します。</li>
  <li><code>_parent</code>: 現在のコンテキストの親の閲覧コンテキストに結果を表示します。親がない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li>
  <li><code>_top</code>: 最上位の閲覧コンテキスト (現在のコンテキストの祖先で、それ以上の親をもたない閲覧コンテキスト）に結果を表示します。親がない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li>
 </ul>
 </dd>
</dl>

<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>

<h3 id="Multiple_&lt;base>_elements" name="Multiple_&lt;base>_elements">複数の &lt;base&gt; 要素</h3>

<p>複数の <code>&lt;base&gt;</code> 要素が使用された場合、最初の <code>href</code> と最初の <code>target</code> の値が使用され、他はすべて無視されます。</p>

<h3 id="In-page_anchors" name="In-page_anchors">ページ内アンカー</h3>

<p>文書内のフラグメントを指すリンク — 例えば <code>&lt;a href="#some-id"&gt;</code> — は <code>&lt;base&gt;</code> によって解決され、基底 URL にフラグメントを付けて HTTP リクエストを発行します。例を示します。</p>

<ol>
 <li><code>&lt;base href="https://example.com"&gt;</code> が指定された場合</li>
 <li>...そこで <code>&lt;a href="#anchor"&gt;Anker&lt;/a&gt;</code> というリンクの場合</li>
 <li>...リンク先は <code>https://example.com/#anchor</code> となります。</li>
</ol>

<h3 id="Open_Graph">Open Graph</h3>

<p><a href="http://ogp.me/">OpenGraph</a> のメタタグは <code>&lt;base&gt;</code> を認識しないので、次のように常に完全 URL を使用してください。</p>

<pre class="brush: html notranslate">&lt;meta property="og:image" content="https://example.com/thumbnail.jpg"&gt;</pre>

<h2 id="Examples" name="Examples">例</h2>

<pre class="brush: html notranslate">&lt;base href="https://www.example.com/"&gt;
&lt;base target="_blank"&gt;
&lt;base target="_top" href="https://example.com/"&gt;
</pre>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '&lt;base&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>最新のスナップショットから変更なし</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '&lt;base&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td><code>target</code> の挙動を定義</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '&lt;base&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td><code>target</code> 属性を追加</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("html.elements.base")}}</p>