Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що міститься всередині <head>?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Усередині елемента **`<head>`** містяться метадані та службова інформація, яка описує сторінку, але не відображається користувачу: назва, кодування, підключені стилі, скрипти, іконки та налаштування для пошукових систем і соцмереж. **Ключове:** Ці дані потрібні браузеру, пошуковим системам, соцмережам та іншим системам, щоб правильно інтерпретувати, індексувати та відображати сторінку.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняВсередині елемента `<head>` містяться **метадані та службова інформація**, яка описує сторінку, але **не відображається користувачу**. Ці дані потрібні браузеру, пошуковим системам, соцмережам та іншим системам, щоб правильно **інтерпретувати, індексувати та відображати** сторінку. --- ### 1. - Назва сторінки Відображається на вкладці браузера і в результатах пошуку. ```html <title>Головна сторінка - Мій сайт</title> ``` *Важливо:* тег `<title>` обов'язковий у кожному HTML-документі. --- ### 2. - Метадані Містить параметри сторінки, які не впливають напряму на контент. Найважливіші варіанти: ```html <meta charset="UTF-8"> <meta name="description" content="Опис сторінки для пошукових систем."> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="Jane Doe"> <meta name="robots" content="index, follow"> ``` Що вони роблять: - `charset`: задає кодування (зазвичай UTF-8). - `description`: опис сторінки (для SEO та сніпетів). - `viewport`: робить сторінку адаптивною на мобільних пристроях. - `author`: вказує автора документа. - `robots`: повідомляє пошуковим системам, чи індексувати сторінку. --- ### 3. - Підключення зовнішніх файлів Використовується для зв'язку сторінки із зовнішніми ресурсами: стилями, іконками, шрифтами. ```html <link rel="stylesheet" href="style.css"> <link rel="icon" href="favicon.ico"> <link rel="preconnect" href="https://fonts.googleapis.com"> ``` Приклади: - `rel="stylesheet"`: підключає CSS-файл; - `rel="icon"`: додає іконку сайту (favicon); - `rel="preconnect"`: оптимізація завантаження зовнішніх ресурсів. --- ### 4. - Вбудовані стилі CSS Дозволяє описувати оформлення прямо в HTML (використовується рідко). ```html <style> body { font-family: Arial; background: #f9f9f9; } </style> ``` --- ### 5. - Підключення JavaScript Можна вставити JS-код або підключити зовнішній файл. Часто використовується з атрибутом `defer`, щоб не блокувати завантаження сторінки. ```html <script src="script.js" defer></script> ``` --- ### 6. - Базова адреса для всіх посилань Встановлює загальний шлях для всіх відносних посилань у документі. ```html <base href="https://example.com/"> ``` --- ### 7. **Open Graph і соцмережі (опційно)** Використовуються, щоб соцмережі коректно відображали прев'ю під час публікації посилань. ```html <meta property="og:title" content="Мій сайт"> <meta property="og:description" content="Опис сторінки"> <meta property="og:image" content="preview.jpg"> <meta property="og:url" content="https://example.com"> ``` --- ### Підсумок: | Тег | Призначення | |---|---| | `<title>` | Назва сторінки | | `<meta>` | Метадані (кодування, опис, автор, SEO, адаптивність) | | `<link>` | Підключення CSS, іконок, шрифтів | | `<style>` | Вбудовані CSS-стилі | | `<script>` | Підключення JavaScript | | `<base>` | Базовий шлях для посилань | | `<meta property="og:*">` | Дані для соцмереж і месенджерів | --- **Простими словами:** усередині `<head>` міститься **все, що потрібно браузеру, щоб «зрозуміти» сторінку**, а не показати її. Це технічний розділ: *назва, опис, стилі, скрипти, іконки та налаштування*.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.