Skip to main content

Що міститься всередині <head>?

HTMLJunior~1 хв читання
Запропонувати правку

Всередині елемента <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> міститься все, що потрібно браузеру, щоб «зрозуміти» сторінку, а не показати її. Це технічний розділ: назва, опис, стилі, скрипти, іконки та налаштування.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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