HTML Zero → Mastery — Lesson 9: The <body> Section Basics

What is the `<body>`?

The <body> element is where all the visible content of a webpage goes. If you can see it in the browser window — text, images, links, lists, tables, forms — it lives inside the <body>.

Metaphor: Think of an HTML page as a house. The <head> is the blueprint (title, metadata, instructions). The <body> is the rooms, furniture, and everything you interact with.

What Goes Inside?

Headings: <h1>–<h6> structure your content.
Paragraphs: <p> hold blocks of text.
Images: <img> display pictures (always use alt text for accessibility).
Links: <a> connect to other pages or sites.
Lists: <ul> (bullets), <ol> (numbers), and <li> (items).
Rules & breaks: <hr> adds a line, <br> adds a line break.
Other elements: tables, forms, videos, audio, and more.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Body Example</title>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This is inside the body.</p>
    <img src="dog.jpg" alt="A happy dog">
    <hr>
    <p>Thanks for visiting!</p>
  </body>
</html>

Common Mistakes

Putting <title> or <meta> inside <body> (they belong in <head>).
Forgetting to close tags, like <p>Hello without </p>.
Using multiple <body> tags — only one is allowed per page.

Quick Quiz

What is the purpose of the <body> element?
Which belongs in the <head>, not the body: <title>, <h1>, <p>?
True/False: You can have two <body> elements in the same HTML page.

Answers

The <body> holds all visible content of a webpage.
<title> belongs in the <head>.
False — only one <body> per page.

Mini Project — Personal Homepage

Create a simple homepage inside the <body> with:

An <h1> with your name.
A <p> introducing yourself.
An <img> with alt text.
A <ul> of your 3 favorite hobbies.
An <a> link to your favorite website.

Did You Know?

HTML was invented by Tim Berners-Lee in 1991 at CERN. The very first webpage used a <body> section with simple text and links. That page still exists online as a piece of history.

FAQ

Q: Do I need special software to write HTML?
A: No — you can use any text editor and a browser.

Q: Can I leave out the <body>?
A: Browsers may try to fix it, but you should always include it for proper structure.

Q: Can I style the <body>?
A: Yes! CSS often targets the body for fonts, colors, and backgrounds.

Lesson 9 Dictionary

B
<body>: Container of all visible content in a webpage: text, images, links, etc.
D
<!DOCTYPE>: Declaration that tells the browser to use modern HTML standards mode.
E
Example: A sample piece of HTML illustrating structure or usage.
H
<h1> … <h6>: Headings used to structure content into sections and subsections.
L
Link / <a>: Element used to navigate to other pages or locations via hyperlink.
P
Paragraph (<p>): Block of text grouped in its own paragraph.
V
Visible Content: Any content inside <body> that appears on screen: media, text, links, etc.

What is the <body>?