Suggest an edit

Improve this article

Refine the answer for “What are the main sections of an HTML document?”. 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)

An HTML document consists of **three main sections** that form its logical and technical structure.
Each of them plays its own role when the page is displayed in the browser:

---

### 1. `<!DOCTYPE html>` - the document type declaration

This is a **service line** that comes **first** in the file.
It tells the browser that the document is written in **HTML5** (the current standard).

Example:

```html
<!DOCTYPE html>
```

Without this declaration, the browser may switch to "compatibility mode" and display the page incorrectly.

---

### 2. `<html>...</html>` - the root section

All the content of the HTML document is located **inside this tag**.
This is the **root** of the page: the element hierarchy (the DOM tree) starts right here.

Example:

```html
<html lang="en">
  ...
</html>
```

The `lang` attribute specifies the page language (important for search engines and screen readers).

---

### 3. `<head>...</head>` - the service part (metadata)

This section is **not displayed on the page**, but it contains important information for the browser and search engines:

- page encoding (`<meta charset="UTF-8">`);
- tab title (`<title>`);
- connecting CSS files (`<link rel="stylesheet" href="style.css">`);
- connecting icons, fonts, meta tags for SEO and social media.

Example:

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

---

### 4. `<body>...</body>` - the main part (content)

This is the **main section**, where everything the **user sees** is located:

- text (`<p>`, `<h1>` and others),
- images (`<img>`),
- links (`<a>`),
- tables (`<table>`),
- forms, video, buttons and so on.

Example:

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

---

### Summary:

| Section | Purpose |
|---|---|
| `<!DOCTYPE html>` | Indicates that the document is HTML5 |
| `<html>` | The root container of the whole page |
| `<head>` | Metadata (title, encoding, styles, scripts) |
| `<body>` | The main content visible to the user |

---

**In simple terms:**
An HTML document is a **three-level skeleton**:
the declaration (`DOCTYPE`), the settings (`head`), the content (`body`).
The browser reads them top to bottom and **builds the visual page** based on that.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.