Suggest an edit

Improve this article

Refine the answer for “Why are the <head> and <body> tags needed?”. 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)

The `<head>` and `<body>` tags are the **two main sections of an HTML document** that separate the technical part of the page from its visible content.
They work together, but perform **different functions**.

---

### `<head>`: the "brain" of the page

The `<head>` section contains **service information** that is **not displayed directly** to the user, but is **needed by the browser, search engines, and social networks**.

Example:

```html
<head>
  <meta charset="UTF-8">
  <title>My site</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
```

#### What can be inside `<head>`:

| Tag | Purpose |
|---|---|
| `<title>` | The page title (displayed on the browser tab) |
| `<meta>` | Metadata: encoding, description, keywords |
| `<link>` | Connecting external files (CSS, icons, etc.) |
| `<style>` | Inline styles |
| `<script>` | Connecting or embedding JS code |
| `<base>` | The base path for all links on the page |
| `<meta name="description">` | A description for SEO and snippets |

**Main function:**
It passes technical data to the browser and search engine: *how to read the page, where to get the styles, what kind of content is inside.*

---

### `<body>`: the "body" of the page

This is the part that contains **everything the user sees and interacts with**: text, images, video, buttons, forms, and so on.

Example:

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

**Main function:**
It displays the **visual content** of the page: all the content available to the user.

---

### How they work together

The browser first reads `<head>`: it gets instructions:

> "What encoding? Where are the styles? What title? Which scripts to load?"

Then it moves on to `<body>` and builds the page's **DOM tree**: everything the user sees.

---

### Summary:

| Section | Purpose | Displayed to the user |
|---|---|---|
| `<head>` | Metadata, styles, scripts, title | No |
| `<body>` | The main content (text, images, buttons) | Yes |

---

**In simple terms:**
`<head>` is **instructions for the browser**,
`<body>` is **content for the person**.
Without `<head>`, the page would be unstructured; without `<body>`, it would be empty.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.