Widely available Fundamental to every HTML document. Use it as the outer content container, then add clear semantic structure inside it.

<body>

The <body> HTML element represents the content of an HTML document. There can be only one <body> element in a document.

DocumentStructureContent

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<body>
1
12
1
1
18
1
DOM API
HTMLBodyElement

The HTMLBodyElement interface provides special properties (beyond those inherited from the regular interface) for manipulating body elements.
1
12
1
3
18
1
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
<!DOCTYPE html>
<html lang="ja">
<head><title>Page Title</title></head>
<body>
  <h1>Hello</h1>
  <p>This is the page content.</p>
</body>
</html>

Live demo

Body structure example

Use the body element to hold the visible content of the document.

PreviewFullscreen

One body per page

Summarize the role of the body element in the overall document tree.

PreviewFullscreen

Document regions

Map common page regions that usually live inside the body element.

PreviewFullscreen

Use cases

  • Page content container

    All headings, sections, navigation, forms, and media that users interact with live within the document body.

  • Top-level document structure

    Use body as the starting point for meaningful layout regions such as header, main, aside, and footer.

Cautions

  • Avoid treating body as a styling shortcut for every layout concern if scoped containers would make ownership clearer.
  • Large script-driven rewrites of body content can reset state, focus, and reading context.

Accessibility

  • The semantic value comes from the landmarks and headings inside body, not from body alone.
  • Keep the overall document structure coherent so assistive technologies can navigate the page efficiently.

Related links