Suggest an edit

Improve this article

Refine the answer for “What does the <body> element do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

Great question.

The `<body>` element is the **main part of an HTML document**, containing **everything the user sees** in the browser window.
If you compare HTML to a building:

- `<head>` is the blueprint and technical data,
- and `<body>` is the **interior and the contents of the rooms**: what we actually use.

---

### The purpose of `<body>`

It serves as a **container for all the content of the page**:
text, images, links, tables, video, buttons, forms and other elements.

Example:

```html
<body>
  <h1>Welcome!</h1>
  <p>This is my first site.</p>
  <img src="photo.jpg" alt="Photo">
  <a href="contact.html">Contact me</a>
</body>
```

Everything between `<body>` and `</body>` is **displayed on screen**.

---

### What `<body>` can contain

Everything the user sees and interacts with:

| Element | Purpose |
|---|---|
| `<h1>`-`<h6>` | Headings of different levels |
| `<p>` | Text paragraphs |
| `<img>` | Images |
| `<a>` | Links |
| `<ul>`, `<ol>` | Lists |
| `<table>` | Tables |
| `<form>` | Forms and input fields |
| `<button>` | Buttons |
| `<video>`, `<audio>` | Media |

---

### How the browser works with `<body>`

1. When the browser loads HTML, it creates the **DOM tree**.
The `<body>` node becomes the **main parent** for all visible elements.
2. CSS controls the appearance of the content inside `<body>`.
3. JavaScript can change or add elements directly inside `<body>` in real time.

Example:

```javascript
document.body.style.background = "lightblue";
```

Changes the background color of the whole page.

---

### Attributes of the `<body>` tag

Although they are now rarely set directly (it's more common to use CSS), they still exist:

- `bgcolor` - background color (deprecated);
- `text` - text color (deprecated);
- `onload` - an event fired when the page loads (still relevant in JavaScript).

Example:

```html
<body onload="alert('Page loaded!')">
```

---

### Summary:

| Characteristic | Description |
|---|---|
| Purpose | The main content of the page |
| What it contains | Everything visible to the user |
| Controlled through | CSS and JavaScript |
| Place in the structure | Inside `<html>`, after `<head>` |

---

**In simple terms:**
`<body>` is the **body of the web page**.
Everything between `<body>` and `</body>` is **what a person sees** when they open the site.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts378 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.