<body>
The <body> element contains the visible document content. It is the root container for the page's actual interface, text, media, and interaction layers.
Overview
The <body> element contains the visible document content. It is the root container for the page's actual interface, text, media, and interaction layers.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| DOM API | ||||||
| The HTMLBodyElement interface provides special properties (beyond those inherited from the regular interface) for manipulating body elements. | 1 | 12 | 1 | 3 | 18 | 1 |
Syntax
<!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.
One body per page
Summarize the role of the body element in the overall document tree.
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
Powered by web-features