Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Навіщо потрібні теги <head> і <body>?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Теги **`<head>`** і **`<body>`** - це два основні розділи HTML-документа, які розділяють технічну частину сторінки і її видимий вміст; вони працюють разом, але виконують різні функції. **Ключове:** `<head>` - це інструкції для браузера, `<body>` - це контент для людини.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняТеги `<head>` і `<body>` - це **два основні розділи HTML-документа**, які розділяють технічну частину сторінки та її видимий вміст. Вони працюють разом, але виконують **різні функції**. --- ### `<head>` - "мозок" сторінки Розділ `<head>` містить **службову інформацію**, яка **не відображається напряму** користувачу, але **потрібна браузеру, пошуковикам і соцмережам**. Приклад: ```html <head> <meta charset="UTF-8"> <title>Мій сайт</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> ``` #### Що може бути всередині `<head>`: | Тег | Призначення | |---|---| | `<title>` | Назва сторінки (відображається на вкладці браузера) | | `<meta>` | Метадані: кодування, опис, ключові слова | | `<link>` | Підключення зовнішніх файлів (CSS, іконок тощо) | | `<style>` | Вбудовані стилі | | `<script>` | Підключення або вставка JS-коду | | `<base>` | Базовий шлях для всіх посилань на сторінці | | `<meta name="description">` | Опис для SEO і сніпетів | **Головна функція:** Передає браузеру і пошуковику технічні дані: *як читати сторінку, де взяти стилі, що за контент усередині.* --- ### `<body>` - "тіло" сторінки Це частина, в якій знаходиться **все, що бачить і з чим взаємодіє користувач**: текст, зображення, відео, кнопки, форми тощо. Приклад: ```html <body> <h1>Ласкаво просимо!</h1> <p>Це мій перший сайт.</p> <img src="photo.jpg" alt="Фото"> </body> ``` **Головна функція:** Відображає **візуальний вміст** сторінки: увесь контент, доступний користувачу. --- ### Як вони працюють разом Браузер спочатку читає `<head>`: отримує інструкції: > «Яке кодування? Де стилі? Який заголовок? Які скрипти підключити?» Потім він переходить до `<body>` і будує **DOM-дерево** сторінки: усе, що бачить користувач. --- ### Підсумок: | Розділ | Призначення | Відображається користувачу | |---|---|---| | `<head>` | Метадані, стилі, скрипти, заголовок | Ні | | `<body>` | Основний вміст (текст, зображення, кнопки) | Так | --- **Простими словами:** `<head>` - це **інструкції для браузера**, `<body>` - це **контент для людини**. Без `<head>` сторінка буде неструктурованою, без `<body>` - порожньою.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.