Menu
Document Structure & Metadata
<body> Element
Wraps all visible content on the page.
1The Visible Tree
Everything the user sees lives inside <body> — headings, paragraphs, images, forms, scripts, and so on.
Example Code
css
<body>
<header>Site header</header>
<main>
<h1>Welcome</h1>
<p>Page content goes here.</p>
</main>
<footer>© 2026</footer>
</body>2Put the element in context
The body contains the page’s visible and interactive content. A meaningful reading order should work before any complex layout is applied. Shared site navigation, the page’s main material, and supporting information should be structured intentionally rather than assembled as unrelated boxes.
3Practice with a small page
Build a body with a header, a main section, and a footer. Read it with styles removed, then add layout CSS. Check that the source order still makes sense when the columns stack on a small screen.
Finished reading?
Mark this topic as complete to track progress.