Тег <head>
Тег <head> (укр. – “голова”) в HTML використовується для групування метаінформації про документ і ресурсів, які можуть бути корисними як для браузера, так і для пошукових систем. Цей тег розміщується перед основним вмістом документа, який розташований у тегу <body>, і містить дані, які не відображаються безпосередньо на сторінці.
Елементи в <head> можуть містити заголовок сторінки, посилання на таблиці стилів і скрипти, мета-дані для пошукової оптимізації та інформацію про кодування сторінки. Він забезпечує важливі налаштування для інтерпретації браузером сторінки.
Основні елементи та їх функції
<title>
Задає заголовок сторінки, який відображається у вкладці браузера та використовується пошуковими системами.
<head>
<title>Мій перший сайт</title>
</head><meta>
Мета-тег надає мета-інформацію, таку як кодування символів, опис сторінки або ключові слова. Наприклад:
<meta charset="UTF-8">
<meta name="description" content="Опис вашої сторінки для SEO">
<meta name="keywords" content="HTML, CSS, сайт, навчання">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><link>
Використовується для зв’язку документа з зовнішніми ресурсами, такими як стилі CSS або іконки.
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon"><style>
Дозволяє вставити CSS безпосередньо у документ. Використовується для визначення стилів сторінки.
<style>
body {
background-color: #f0f0f0;
}
</style><script>
Використовується для вставлення JavaScript-коду або підключення зовнішніх скриптів.
<script src="script.js"></script>
<script>
console.log('Hello, world!');
</script><noscript>
Використовується для виведення вмісту, якщо браузер не підтримує або вимкнено JavaScript.
<noscript>Ваш браузер не підтримує JavaScript!</noscript>Атрибути тега <head>
Тег <head> сам по собі зазвичай не має атрибутів, але містить інші теги, які мають атрибути, як показано вище.
Приклад використання
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Зразок сторінки</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Вітаємо на нашому сайті!</h1>
</body>
</html>Додаткові моменти
- Тег
<head>повинен міститися у кожному HTML-документі. - Вміст
<head>не відображається безпосередньо на сторінці, але впливає на її функціонування, вигляд та взаємодію з користувачем. - Розміщення мета-даних у
<head>важливе для SEO, відображення вмісту на мобільних пристроях та доступності.
