---
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>