The <body> Element
As defined in the HTML Living Standard, the <body> element represents the content of the document. It is the container for all the renderable elements of a web page, such as text, images, links, and tables.
<head> (Metadata) </head>
<body>
(Visible Content Goes Here)
</body>
</html>
<body>
<header>...</header>
<main>
<h1>Hello World</h1>
</main>
<footer>...</footer>
</body>
View HTML Living Standard: The body element
Accessibility Foundation
The <body> element is the root of the accessibility tree for all perceivable content. Its implementation directly impacts how users interact with the page.
WCAG Requirement: Bypass Blocks
Success Criterion 2.4.1 (Level A): A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
The "Skip to Main Content" link should be the first child of the <body> element. This ensures keyboard and screen reader users can jump straight to the primary content without navigating through repetitive headers or menus.
Technical Notes
- Singleton: There can only be one
<body>element in a document. - Event Handlers: Many global event handlers (like
onload,onresize, oronscroll) are traditionally placed on the<body>element, although modern best practices prefer using JavaScript'saddEventListeneron thewindowobject. - Landmark Container: While the
<body>isn't a landmark itself, it is the parent of all structural landmarks (<header>,<nav>,<main>,<aside>,<footer>).
WCAG Requirement: Page Titled
Success Criterion 2.4.2 (Level A): Web pages have titles that describe topic or purpose.
While the <title> lives in the <head>, the <body> content must support that title. Screen readers announce the title as soon as the body begins to load, providing essential orientation for the user.