Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке елемент <head> в HTML?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Елемент **`<head>`** в HTML, це службова (невидима) частина документа, яка містить метаінформацію про сторінку: її назву, кодування, підключені стилі, скрипти, опис для пошукових систем тощо. **Ключове:** Браузер використовує вміст `<head>`, щоб зрозуміти, як обробляти й відображати сторінку, але не показує його користувачу.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняЕлемент `<head>` в HTML, це **службова (невидима) частина документа**, яка містить **метаінформацію** про сторінку: її назву, кодування, підключені стилі, скрипти, опис для пошукових систем тощо. Браузер використовує вміст `<head>`, щоб **зрозуміти, як обробляти й відображати сторінку**, але **не показує його користувачу**. --- ### 1. Де розташований `<head>` Він розташовується **між тегами** `<html>` та `<body>` і завжди йде **до** основного вмісту сторінки. Приклад базової структури: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Мій сайт</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Привіт, світ!</h1> </body> </html> ``` --- ### 2. Що зберігається всередині `<head>` `<head>` містить **технічні теги**, які керують поведінкою сторінки, але не виводять контент. | Тег | Призначення | |---|---| | `<title>` | Назва сторінки (відображається на вкладці браузера) | | `<meta charset="UTF-8">` | Встановлює кодування тексту | | `<meta name="description" content="Опис сторінки">` | Опис для пошукових систем (SEO) | | `<meta name="viewport" content="width=device-width, initial-scale=1.0">` | Адаптація під мобільні пристрої | | `<link rel="stylesheet" href="style.css">` | Підключає зовнішній CSS-файл | | `<script src="script.js" defer></script>` | Підключає JavaScript-файл | | `<style>` | Вбудовані CSS-правила | | `<base href="/">` | Встановлює базовий шлях для посилань | | `<meta name="keywords" content="html, css, web">` | (застаріле) ключові слова для SEO | | `<meta name="author" content="Ім'я автора">` | Автор сторінки | | `<link rel="icon" href="favicon.ico">` | Іконка сайту на вкладці браузера | --- ### 3. Роль `<head>` для браузера та пошукових систем - повідомляє **основні технічні параметри** сторінки (кодування, мову, адаптивність); - вказує **метаописи** для SEO та соцмереж; - підключає **зовнішні ресурси**: стилі, скрипти, іконки; - допомагає браузеру **оптимізувати завантаження** та **індексацію** сайту. --- ### Підсумок: | Характеристика | Опис | |---|---| | Розташування | Між `<html>` та `<body>` | | Призначення | Містить метадані та службову інформацію | | Відображається на сторінці | Ні | | Основні теги | `<title>`, `<meta>`, `<link>`, `<script>`, `<style>` | | Важливість | Критично важливий для SEO, кодування та підключення ресурсів | --- **Простими словами:** `<head>`, це **«паспорт» веб-сторінки**. Він не видимий користувачу, але повідомляє браузеру *хто він, що він, якою мовою написаний і де взяти все потрібне для відображення сторінки*.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.