What's in the Body?

What the Body Does

The <body> section is where everything you can actually see on a webpage lives - text, images, links, lists, tables, forms, and more.

If the <head> is your site's blueprint, the <body> is the house itself. It's what the browser displays to users, styled later with CSS and sometimes made interactive with JavaScript.

Every HTML document has exactly one <body> element, and it always comes after the <head>.

Example:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First Page</title>
  </head>

  <body>
    <h1>Hello World!</h1>
    <p>This is my first paragraph of visible content.</p>
  </body>
</html>

What Goes Inside the Body

The <body> holds all the elements that make up the content and structure of your page. You can think of them as the building materials that stack and arrange your information.

Common elements include:

Table with three columns, Element, Purpose, and Example, listing eight common HTML body elements including headings, paragraphs, links, images, lists, div, section, and header or footer, with the purpose and an example of each.

Block vs. Inline Elements

Inside the body, HTML elements fall into two main types:

Table with three columns, Type, Behavior, and Example, contrasting block-level elements, which start on a new line and take up full width, with inline elements, which stay within a line of text.

Block elements are used for structure, while inline elements add emphasis, links, or small visual changes inside those blocks.

Nesting Elements Correctly

HTML is all about structure - each tag should open and close in a logical order.

Correct:

<section>
  <h2>My Hobbies</h2>
  <p>I love hiking and photography.</p>
</section>

Incorrect:

<p><section>My Hobbies</section></p>  <!-- Invalid nesting -->

Rule: Blocks can contain inline or other block elements, but inline elements should never wrap blocks.

Word to the Wise: The "Box Inside a Box" Rule

Think of HTML elements like a set of nesting dolls. For your code to work correctly, an element must be fully contained within its "parent" element.

For example, a <section> acts like a container (the parent). Any <h2> or <p> tags inside it are its "children".

• Correct Nesting: <section> <h2>Title</h2> </section> (The child is tucked safely inside).
• The Golden Rule: You must close your tags in the reverse order you opened them. If you open a <div> and then a <p>, you must close the </p> before you close the </div>.

Why this Matters for Your CSS:

When you write a rule like nav a, you are telling the browser to "find the nav parent and style the a children inside it". If your nesting is messy, the browser won't be able to find those children, and your styles won't appear!

Pro-Tip for Students: The "Staircase" Visual

If you use the Tab key to indent your code, good nesting looks like a staircase. If a closing tag doesn't line up vertically with its opening tag, that's a huge red flag that your nesting is off!

What the Browser Does with the Body

When a browser loads your page, it:

1. Reads the <body> content.
2. Builds a Document Object Model (DOM) - a representation, often visual, of the internal structure of your page.
3. Displays the visible elements on screen in the order they appear in the HTML.

Later, CSS will style these elements, and JavaScript can interact with them - but the body is always where it all begins.

Try It Now: What's in Your Body?

1. Open the MDN Playground (https://developer.mozilla.org/en-US/play).
2. Copy and paste this starter template:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Practice: What's in the Body?</title>
  </head>

  <body>
    <!-- Add your content here -->
  </body>
</html>

3. Inside the <body> tags, add the following:
   • A main heading (<h1>) for your page title
   • One paragraph describing what your page is about
   • An unordered list (<ul>) with three items
   • A link to your favorite website
   • One image (you can use any public image URL with <img src="...">)
4. Run your code and make sure everything appears correctly.
5. Try moving your image above or below your paragraph - see how block order affects layout.

Quick Checklist

Common Fixes

• Putting visible content in the <head>: If you expect to see it on the page, it belongs in the <body>, not the <head>
• Using more than one <body> element: Every HTML document must have exactly one <body>, no more no less
• Incorrect nesting of elements: Block elements should not be wrapped inside inline elements like <p> or <a>
• Using <div> for everything: It can seem like an attractive thing to do, but it creates more problems than solutions. Browers prefer meaningful elements like <section>, <header>, and <footer> when they fit the purpose. Use the <div> tag when you need a generic container to group content for styling or layout purposes and no semantic HTML element accurately describes the content's meaning.
• Expecting layout or styling without CSS: The <body> defines structure and order - appearance comes later with CSS

Reflection

• What kinds of content belong in the body versus the head?
• Why does element order matter in the body?
• How can proper structure make your CSS styling easier later?

Source: Khalil Abdullah and Saylor University
This work is licensed under a Creative Commons Attribution 4.0 License.

Source: Kevin Powell