diff options
Diffstat (limited to 'devdocs/html/element%2Fbase.html')
| -rw-r--r-- | devdocs/html/element%2Fbase.html | 117 |
1 files changed, 117 insertions, 0 deletions
diff --git a/devdocs/html/element%2Fbase.html b/devdocs/html/element%2Fbase.html new file mode 100644 index 00000000..dff26f05 --- /dev/null +++ b/devdocs/html/element%2Fbase.html @@ -0,0 +1,117 @@ +<header><h1><base>: The Document Base URL element</h1></header><div class="section-content"> +<p>The <code><base></code> <a href="../index">HTML</a> element specifies the base URL to use for all <em>relative</em> URLs in a document. There can be only one <code><base></code> element in a document.</p> <p>A document's used base URL can be accessed by scripts with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/baseURI"><code>Node.baseURI</code></a>. If the document has no <code><base></code> elements, then <code>baseURI</code> defaults to <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/href"><code>location.href</code></a>.</p> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>Metadata content.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>There must be no closing tag.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td>A <a href="head"><code><head></code></a> that doesn't contain another <a href="base" aria-current="page"><code><base></code></a> element.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLBaseElement"><code>HTMLBaseElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <div class="notecard warning" id="sect1"> <p><strong>Warning:</strong> If either of the following attributes are specified, this element <strong>must</strong> come before other elements with attribute values of URLs, such as <a href="link"><code><link></code></a>'s <code>href</code> attribute.</p> </div> <dl> <dt id="href"><a href="#href"><code>href</code></a></dt> <dd> <p> The base URL to be used throughout the document for relative URLs. Absolute and relative URLs are allowed. <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs"><code>data:</code></a> and <code>javascript:</code> URLs are not allowed. </p> </dd> <dt id="target"><a href="#target"><code>target</code></a></dt> <dd> <p>A <strong>keyword</strong> or <strong>author-defined name</strong> of the default <a href="https://developer.mozilla.org/en-US/docs/Glossary/Browsing_context">browsing context</a> to show the results of navigation from <a href="a"><code><a></code></a>, <a href="area"><code><area></code></a>, or <a href="form"><code><form></code></a> elements without explicit <code>target</code> attributes. The following keywords have special meanings:</p> <ul> <li> +<code>_self</code> (default): Show the result in the current browsing context.</li> <li> +<code>_blank</code>: Show the result in a new, unnamed browsing context.</li> <li> +<code>_parent</code>: Show the result in the parent browsing context of the current one, if the current page is inside a frame. If there is no parent, acts the same as <code>_self</code>.</li> <li> +<code>_top</code>: Show the result in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent). If there is no parent, acts the same as <code>_self</code>.</li> </ul> </dd> </dl> +</div> +<h2 id="usage_notes">Usage notes</h2> + +<h3 id="multiple_base_elements">Multiple <base> elements</h3> +<div class="section-content"><p>If multiple <code><base></code> elements are used, only the first <code>href</code> and first <code>target</code> are obeyed — all others are ignored.</p></div> +<h3 id="in-page_anchors">In-page anchors</h3> +<div class="section-content"> +<p>Links pointing to a fragment in the document — e.g. <code><a href="#some-id"></code> — are resolved with the <code><base></code>, triggering an HTTP request to the base URL with the fragment attached.</p> <p>For example, given <code><base href="https://example.com/"></code> and this link: <code><a href="#anchor">To anchor</a></code>. The link points to <code>https://example.com/#anchor</code>.</p> +</div> +<h3 id="open_graph">Open Graph</h3> +<div class="section-content"> +<p><a href="https://ogp.me/" target="_blank">Open Graph</a> tags do not acknowledge <code><base></code>, and should always have full absolute URLs. For example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="0iJlOR554RqTmTCNFnWl8zyuzUBLJPI8BW+NuSntxSE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:image<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/thumbnail.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="B0MoyV8W9bW4KUhzz0Wuq1E0lI/LfFZ/ZUSqf3CHjZM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>base</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.example.com/<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>base</span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>base</span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_top<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div></div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/semantics.html#the-base-element">HTML Standard <br><small># the-base-element</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody> +<tr> +<th><code>base</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes"><details><summary>Yes</summary>Before Internet Explorer 7, <code><base></code> can be positioned anywhere in the document and the nearest value of <code><base></code> is used.</details></td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>href</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>target</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +</tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base</a> + </p> +</div> |