Що таке елемент <head> в HTML?
Елемент <head> в HTML, це службова (невидима) частина документа, яка містить метаінформацію про сторінку: її назву, кодування, підключені стилі, скрипти, опис для пошукових систем тощо.
Браузер використовує вміст <head>, щоб зрозуміти, як обробляти й відображати сторінку, але не показує його користувачу.
1. Де розташований <head>
Він розташовується між тегами <html> та <body> і завжди йде до основного вмісту сторінки.
Приклад базової структури:
<!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>, це «паспорт» веб-сторінки.
Він не видимий користувачу, але повідомляє браузеру хто він, що він, якою мовою написаний і де взяти все потрібне для відображення сторінки.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.