Пошук уроків, статей та іншого контенту
Дізнаєтеся, як задавати назву сторінки, кодування, опис і службові параметри через head, title та meta.
Метадані — це службова інформація про HTML-документ. Вона не відображається як основний вміст сторінки, але допомагає:
браузеру правильно обробляти документ;
показувати назву сторінки у вкладці;
правильно читати символи;
пошуковим системам розуміти призначення сторінки;
адаптувати сторінку до ширини екрана пристрою.
Метадані розміщують усередині елемента <head>.
headЕлемент <head> містить інформацію про документ, яка потрібна браузеру, але зазвичай не показується безпосередньо на сторінці.
Базова структура HTML-документа:
<!doctype html>
<html lang="uk">
<head>
<!-- Метадані документа -->
</head>
<body>
<!-- Вміст, який бачить користувач -->
</body>
</html>У <head> можуть міститися:
назва сторінки;
кодування символів;
опис сторінки;
параметри відображення на мобільних пристроях;
підключення CSS-файлів;
інші службові налаштування.
Елементи з <head> не потрібно дублювати в <body>.
titleЕлемент <title> задає назву HTML-документа:
<title>Мій блог</title>Назва відображається:
у вкладці браузера;
у назві вікна браузера;
у закладках після збереження сторінки;
іноді в результатах пошуку.
У кожному HTML-документі має бути один елемент <title>. Він повинен коротко описувати вміст сторінки.
Наприклад:
<title>Рецепт українського борщу</title>Краще використовувати конкретну назву:
<title>Контакти — Кав'ярня «Зерно»</title>Замість надто загальної:
<title>Сторінка</title><title> не є заголовком, який видно всередині сторінки. Для видимого заголовка використовують, наприклад, <h1>:
<head>
<title>Курс HTML</title>
</head>
<body>
<h1>Курс HTML для початківців</h1>
</body>meta charsetКодування визначає, як браузер має читати символи документа. Для сучасних HTML-документів використовують UTF-8.
<meta charset="UTF-8">UTF-8 підтримує українські літери, латиницю, символи валют, емодзі та багато інших символів.
Цей елемент розміщують якомога ближче до початку <head>, щоб браузер одразу знав, як читати документ:
<head>
<meta charset="UTF-8">
<title>Українська сторінка</title>
</head>Якщо кодування вказано неправильно або запізно, замість тексту можуть з'явитися незрозумілі символи, наприклад:
ПривітАтрибут charset задає кодування, а не мову сторінки. Мову документа задають окремо атрибутом lang в елементі <html>:
<html lang="uk">meta name="description"Метатег із назвою description містить короткий опис сторінки:
<meta
name="description"
content="Практичний курс HTML для початківців із прикладами та вправами."
>У цього елемента:
name="description" вказує, що це опис сторінки;
content містить сам опис.
Опис може використовуватися пошуковими системами під час формування результатів пошуку. Однак пошукова система не зобов'язана показувати саме цей текст.
Хороший опис:
відповідає вмісту сторінки;
написаний зрозуміло;
коротко пояснює користь сторінки;
не складається з випадкового переліку ключових слів.
Приклад:
<meta
name="description"
content="Дізнайтеся, як створювати структуру HTML-сторінок за допомогою практичних прикладів."
>viewportЩоб сторінка правильно масштабувалася на смартфонах і планшетах, у <head> додають метатег viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Його частини означають:
width=device-width — ширина сторінки відповідає ширині екрана пристрою;
initial-scale=1.0 — початковий масштаб сторінки дорівнює 100%.
Без цього налаштування мобільний браузер може відображати сторінку так, ніби вона розрахована на широкий екран. Тоді текст і блоки можуть виглядати надто дрібними.
Метатег viewport не робить сторінку повністю адаптивною сам по собі. Він лише задає правильну область перегляду. Для адаптивності також потрібні відповідні HTML-структура та CSS.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Курс HTML для початківців</title>
<meta
name="description"
content="Вивчайте основи HTML за допомогою простих пояснень і практичних прикладів."
>
</head>
<body>
<h1>Курс HTML для початківців</h1>
<p>
У цьому курсі ви навчитеся створювати структуру вебсторінок.
</p>
</body>
</html>У цьому прикладі:
<!doctype html> повідомляє браузеру, що використовується сучасний HTML.
lang="uk" вказує мову документа.
meta charset="UTF-8" забезпечує правильне відображення українських символів.
meta name="viewport" налаштовує відображення на різних екранах.
title задає назву вкладки браузера.
meta name="description" містить короткий опис сторінки.
h1 і p розміщені в <body>, тому їх бачить користувач.
name і contentБагато метатегів мають такий вигляд:
<meta name="назва" content="значення">Атрибут name визначає тип метаданих, а content — їхнє значення.
Наприклад:
<meta name="description" content="Опис сторінки">Тут:
назва метаданих — description;
значення — Опис сторінки.
Для кодування використовується короткий запис без name і content:
<meta charset="UTF-8">Щоб перевірити назву сторінки:
Відкрийте HTML-файл у браузері.
Подивіться на назву вкладки.
Переконайтеся, що українські символи відображаються правильно.
Щоб переглянути метадані в коді:
Відкрийте інструменти розробника браузера.
Перейдіть до перегляду HTML-документа.
Знайдіть елемент <head>.
Метадані не потрібно шукати серед видимого тексту сторінки, оскільки <head> і його вміст не відображаються як звичайний блок документа.
title у bodyНеправильно:
<body>
<title>Моя сторінка</title>
</body>Правильно:
<head>
<title>Моя сторінка</title>
</head><title> має бути всередині <head>.
Якщо сторінка містить український текст, додайте:
<meta charset="UTF-8">Бажано розміщувати цей елемент на початку <head>.
title і h1<title> задає назву документа для браузера та інших служб.
<title>Наші послуги</title><h1> — це видимий головний заголовок сторінки:
<h1>Наші послуги</h1>У правильно структурованому документі вони можуть мати схожий зміст, але виконують різні функції.
contentНеповний метатег:
<meta name="description">Правильний варіант:
<meta name="description" content="Короткий опис сторінки">Неінформативний опис:
<meta name="description" content="Це вебсторінка">Краще пояснити, що саме користувач знайде на сторінці:
<meta
name="description"
content="Поради та приклади для створення першої HTML-сторінки."
>Створіть HTML-документ і додайте до нього:
українську мову через lang="uk";
кодування UTF-8;
назву сторінки у <title>;
опис сторінки через meta name="description";
налаштування viewport;
видимий заголовок <h1>.
Тема сторінки — ваше портфоліо. Перевірте, чи з'явилася правильна назва у вкладці браузера і чи коректно відображаються українські символи.
<head> містить службову інформацію про HTML-документ.
<title> задає назву сторінки у вкладці браузера.
<meta charset="UTF-8"> забезпечує правильне відображення символів.
<meta name="description"> містить короткий опис сторінки.
<meta name="viewport"> допомагає правильно відображати сторінку на мобільних пристроях.
Метадані розміщують у <head>, а видимий вміст — у <body>.
<title> і <h1> мають різні призначення: перший описує документ для браузера, другий є видимим заголовком сторінки.