path: root/devdocs/html/element%2Fbody.html

<header><h1>&lt;body&gt;: The Document Body element</h1></header><div class="section-content">
<p>The <code>&lt;body&gt;</code> <a href="../index">HTML</a> element represents the content of an HTML document. There can be only one <code>&lt;body&gt;</code> element in a document.</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>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>
<a href="../content_categories#flow_content">Flow content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> The start tag may be omitted if the first thing inside it is not a space character, comment, <a href="script"><code>&lt;script&gt;</code></a> element or <a href="style"><code>&lt;style&gt;</code></a> element. The end tag may be omitted if the <code>&lt;body&gt;</code> element has contents or has a start tag, and is not immediately followed by a comment. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> It must be the second element of an <a href="html"><code>&lt;html&gt;</code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code></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/HTMLBodyElement"><code>HTMLBodyElement</code></a> <ul> <li> The <code>&lt;body&gt;</code> element exposes the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLBodyElement"><code>HTMLBodyElement</code></a> interface. </li> <li> You can access the <code>&lt;body&gt;</code> element through the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/body"><code>document.body</code></a> property. </li> </ul> </td> </tr> </tbody> </table></div></figure>
</div>
<h2 id="attributes">Attributes</h2>
<div class="section-content">
<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="alink">
<a href="#alink"><code>alink</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr>
</dt> <dd> <p> Color of text for hyperlinks when selected. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"><code>color</code></a> property in conjunction with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:active"><code>:active</code></a> pseudo-class instead.</strong> </p> </dd> <dt id="background">
<a href="#background"><code>background</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr>
</dt> <dd> <p> URI of an image to use as a background. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background"><code>background</code></a> property on the element instead.</strong> </p> </dd> <dt id="bgcolor">
<a href="#bgcolor"><code>bgcolor</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr>
</dt> <dd> <p> Background color for the document. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color"><code>background-color</code></a> property on the element instead.</strong> </p> </dd> <dt id="bottommargin">
<a href="#bottommargin"><code>bottommargin</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr>
</dt> <dd> <p> The margin of the bottom of the body. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom"><code>margin-bottom</code></a> property on the element instead.</strong> </p> </dd> <dt id="leftmargin">
<a href="#leftmargin"><code>leftmargin</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr>
</dt> <dd> <p> The margin of the left of the body. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left"><code>margin-left</code></a> property on the element instead.</strong> </p> </dd> <dt id="link">
<a href="#link"><code>link</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr>
</dt> <dd> <p> Color of text for unvisited hypertext links. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"><code>color</code></a> property in conjunction with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:link"><code>:link</code></a> pseudo-class instead.</strong> </p> </dd> <dt id="onafterprint"><a href="#onafterprint"><code>onafterprint</code></a></dt> <dd> <p>Function to call after the user has printed the document.</p> </dd> <dt id="onbeforeprint"><a href="#onbeforeprint"><code>onbeforeprint</code></a></dt> <dd> <p>Function to call when the user requests printing of the document.</p> </dd> <dt id="onbeforeunload"><a href="#onbeforeunload"><code>onbeforeunload</code></a></dt> <dd> <p>Function to call when the document is about to be unloaded.</p> </dd> <dt id="onblur"><a href="#onblur"><code>onblur</code></a></dt> <dd> <p>Function to call when the document loses focus.</p> </dd> <dt id="onerror"><a href="#onerror"><code>onerror</code></a></dt> <dd> <p>Function to call when the document fails to load properly.</p> </dd> <dt id="onfocus"><a href="#onfocus"><code>onfocus</code></a></dt> <dd> <p>Function to call when the document receives focus.</p> </dd> <dt id="onhashchange"><a href="#onhashchange"><code>onhashchange</code></a></dt> <dd> <p>Function to call when the fragment identifier part (starting with the hash (<code>'#'</code>) character) of the document's current address has changed.</p> </dd> <dt id="onlanguagechange"><a href="#onlanguagechange"><code>onlanguagechange</code></a></dt> <dd> <p>Function to call when the preferred languages changed.</p> </dd> <dt id="onload"><a href="#onload"><code>onload</code></a></dt> <dd> <p>Function to call when the document has finished loading.</p> </dd> <dt id="onmessage"><a href="#onmessage"><code>onmessage</code></a></dt> <dd> <p>Function to call when the document has received a message.</p> </dd> <dt id="onoffline"><a href="#onoffline"><code>onoffline</code></a></dt> <dd> <p>Function to call when network communication has failed.</p> </dd> <dt id="ononline"><a href="#ononline"><code>ononline</code></a></dt> <dd> <p>Function to call when network communication has been restored.</p> </dd> <dt id="onpopstate"><a href="#onpopstate"><code>onpopstate</code></a></dt> <dd> <p>Function to call when the user has navigated session history.</p> </dd> <dt id="onredo"><a href="#onredo"><code>onredo</code></a></dt> <dd> <p>Function to call when the user has moved forward in undo transaction history.</p> </dd> <dt id="onresize"><a href="#onresize"><code>onresize</code></a></dt> <dd> <p>Function to call when the document has been resized.</p> </dd> <dt id="onstorage"><a href="#onstorage"><code>onstorage</code></a></dt> <dd> <p>Function to call when the storage area has changed.</p> </dd> <dt id="onundo"><a href="#onundo"><code>onundo</code></a></dt> <dd> <p>Function to call when the user has moved backward in undo transaction history.</p> </dd> <dt id="onunload"><a href="#onunload"><code>onunload</code></a></dt> <dd> <p>Function to call when the document is going away.</p> </dd> <dt id="rightmargin">
<a href="#rightmargin"><code>rightmargin</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr>
</dt> <dd> <p> The margin of the right of the body. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right"><code>margin-right</code></a> property on the element instead.</strong> </p> </dd> <dt id="text">
<a href="#text"><code>text</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr>
</dt> <dd> <p> Foreground color of text. <strong>Do not use this attribute! Use CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"><code>color</code></a> property on the element instead.</strong> </p> </dd> <dt id="topmargin">
<a href="#topmargin"><code>topmargin</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr>
</dt> <dd> <p> The margin of the top of the body. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top"><code>margin-top</code></a> property on the element instead.</strong> </p> </dd> <dt id="vlink">
<a href="#vlink"><code>vlink</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr>
</dt> <dd> <p> Color of text for visited hypertext links. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"><code>color</code></a> property in conjunction with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:visited"><code>:visited</code></a> pseudo-class instead.</strong> </p> </dd> </dl>
</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="H10tvIA0tw8h87d9Udg0elNUpZBIwIPLHypfbXy9j1o=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
      The <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity">&amp;lt;</span>body<span class="token entity named-entity">&amp;gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> HTML element represents the content of an
      HTML document. There can be only one <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity">&amp;lt;</span>body<span class="token entity named-entity">&amp;gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> element in
      a document.
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</pre>
</div></div>
<h3 id="result">Result</h3>
<div class="section-content"><div class="code-example" id="sect1">

<iframe class="sample-code-frame" title="Examples" id="frame_example" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/body/runner.html?id=example" loading="lazy"></iframe>
</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/sections.html#the-body-element">HTML Standard <br><small># the-body-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>body</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">1</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">1</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>alink</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">≤4</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">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>background</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">≤4</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">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>bgcolor</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">≤4</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">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>bottommargin</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">79</td>
<td class="bc-supports-yes"><details><summary>35</summary>Before Firefox 35, it was supported in Quirks Mode only.</details></td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes"><details><summary>35</summary>Before Firefox 35, it was supported in Quirks Mode only.</details></td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>leftmargin</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">79</td>
<td class="bc-supports-yes"><details><summary>35</summary>Before Firefox 35, it was supported in Quirks Mode only.</details></td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes"><details><summary>35</summary>Before Firefox 35, it was supported in Quirks Mode only.</details></td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>link</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">≤4</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">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>rightmargin</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">79</td>
<td class="bc-supports-yes"><details><summary>35</summary>Before Firefox 35, it was supported in Quirks Mode only.</details></td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes"><details><summary>35</summary>Before Firefox 35, it was supported in Quirks Mode only.</details></td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>text</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">≤4</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">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>topmargin</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">79</td>
<td class="bc-supports-yes"><details><summary>35</summary>Before Firefox 35, it was supported in Quirks Mode only.</details></td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes"><details><summary>35</summary>Before Firefox 35, it was supported in Quirks Mode only.</details></td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>vlink</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">≤4</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">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
</tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li><a href="html"><code>&lt;html&gt;</code></a></li> <li><a href="head"><code>&lt;head&gt;</code></a></li> </ul></div><div class="_attribution">
  <p class="_attribution-p">
    &copy; 2005&ndash;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/body" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body</a>
  </p>
</div>