Навіщо потрібні теги <head> і <body>?
Теги <head> і <body> - це два основні розділи HTML-документа, які розділяють технічну частину сторінки та її видимий вміст.
Вони працюють разом, але виконують різні функції.
<head> - "мозок" сторінки
Розділ <head> містить службову інформацію, яка не відображається напряму користувачу, але потрібна браузеру, пошуковикам і соцмережам.
Приклад:
<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> - "тіло" сторінки
Це частина, в якій знаходиться все, що бачить і з чим взаємодіє користувач: текст, зображення, відео, кнопки, форми тощо.
Приклад:
<body>
<h1>Ласкаво просимо!</h1>
<p>Це мій перший сайт.</p>
<img src="photo.jpg" alt="Фото">
</body>Головна функція: Відображає візуальний вміст сторінки: увесь контент, доступний користувачу.
Як вони працюють разом
Браузер спочатку читає <head>: отримує інструкції:
«Яке кодування? Де стилі? Який заголовок? Які скрипти підключити?»
Потім він переходить до <body> і будує DOM-дерево сторінки: усе, що бачить користувач.
Підсумок:
| Розділ | Призначення | Відображається користувачу |
|---|---|---|
<head> | Метадані, стилі, скрипти, заголовок | Ні |
<body> | Основний вміст (текст, зображення, кнопки) | Так |
Простими словами:
<head> - це інструкції для браузера,
<body> - це контент для людини.
Без <head> сторінка буде неструктурованою, без <body> - порожньою.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.