HTML <body> Element: Visible Page Content

The body contains the things readers see and interact with: headings, paragraphs, navigation, pictures, lists, and forms.

What You Need to Know

You can organize the body into header, main, and footer. Those elements describe the roles of areas; they are not required just to make the content visible.

Think of an HTML document as a small book: the browser needs a title and some information about how to read it, while visitors need the actual chapters and text.

Example: See It in Action

Try this markup in a fresh practice file. The next section explains the parts worth paying attention to.

This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.

<body>
    <header>
        <h1>Reading Corner</h1>
    </header>
    <main>
        <p>Find your next book here.</p>
    </main>
    <footer>
        <p>Made by the reading club.</p>
    </footer>
</body>

Let’s Understand the Example

• The body contains the page content that people read and interact with.
• Header introduces a page or section, often with a title and navigation.
• An h1 introduces the main subject of the page. Use the heading level for structure rather than font size.

You should see a readable heading and its related content. The heading level tells readers how the ideas fit together, not merely how large the letters look.

What Should You See?

The page should display “Reading Corner” as a heading, followed by its related content. Change the heading text and refresh the browser to see the result.

Open the page and compare what appears in the browser tab with the heading inside the document. Both have different jobs.

Try It Yourself

1. Add a second paragraph inside main, not inside head.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Putting the site name in the head element because the words head and header sound alike.
• The title in the browser tab and the heading visible in the page are different pieces of information.

Key Takeaways

• The body contains the things readers see and interact with: headings, paragraphs, navigation, pictures, lists, and forms.
• The body contains the page content that people read and interact with.
• You can organize the body into header, main, and footer. Those elements describe the roles of areas; they are not required just to make the content visible.