Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «З чого складається HTML-документ?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

HTML-документ складається з **набору тегів**, які описують **структуру і вміст вебсторінки**.
Кожен тег повідомляє браузеру, **що саме потрібно відобразити**: заголовок, текст, зображення, посилання тощо.

---

### Основна структура HTML-документа

Ось приклад базового шаблону:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Назва сторінки</title>
  </head>
  <body>
    <h1>Привіт, світе!</h1>
    <p>Це мій перший HTML-документ.</p>
  </body>
</html>
```

Розберемо по частинах:

---

### 1. `<!DOCTYPE html>`

Це **оголошення типу документа**.
Воно повідомляє браузеру, що документ написаний на **HTML5** - найактуальнішій версії мови.

Без цього рядка браузер може неправильно інтерпретувати сторінку.

---

### 2. `<html>...</html>`

Це **кореневий тег**, який містить **увесь HTML-код**.
Усе, що відображається на сторінці, знаходиться **всередині нього**.

Атрибут `lang="en"` можна додати, щоб вказати мову сторінки:

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

---

### 3. `<head>...</head>`

Розділ **службової інформації (метаданих)**, яка **не відображається напряму** на сторінці.

Тут задаються:

- назва вкладки (`<title>`);
- кодування (`<meta charset="UTF-8">`);
- підключення стилів (`<link rel="stylesheet" href="style.css">`);
- підключення скриптів, шрифтів та іконок.

Приклад:

```html
<head>
  <meta charset="UTF-8">
  <title>Мій сайт</title>
  <link rel="stylesheet" href="style.css">
</head>
```

---

### 4. `<body>...</body>`

Це **основний вміст сторінки**: те, що бачить користувач.

Тут розміщуються:

- текст (`<p>`),
- заголовки (`<h1>`-`<h6>`),
- зображення (`<img>`),
- посилання (`<a>`),
- списки, таблиці, форми та інші елементи.

Приклад:

```html
<body>
  <h1>Ласкаво просимо!</h1>
  <p>Тут буде мій перший сайт.</p>
  <img src="photo.jpg" alt="Фото">
</body>
```

---

### Підсумок:

| Частина | Призначення |
|---|---|
| `<!DOCTYPE html>` | Вказує, що використовується HTML5 |
| `<html>` | Кореневий елемент документа |
| `<head>` | Метадані (заголовок, стилі, кодування) |
| `<body>` | Основний вміст сторінки |

---

**Просто запам'ятай:**
HTML-документ - це **каркас**, що складається з трьох головних частин:
**оголошення**, **голови (head)** і **тіла (body)**.
CSS і JavaScript вже «прикрашають» і «оживляють» цей каркас.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати280 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.