HTML Заголовки
Заголовки HTML– це заголовки або підзаголовки, які потрібно відображати на веб-сторінці.
В цій темі:
HTML Заголовки
Заголовки визначаються за допомогою тегів від <h1> до <h6>.
Тег <h1> визначає найбільш важливий заголовок. Тег <h6> визначає найменш важливий заголовок.
Приклад
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
Спробуйте самі »
Примітка: Браузери автоматично додають відступ (margin) до і після заголовка.
Заголовки важливі
Пошукові системи використовують заголовки для індексації структури та змісту вебсторінок.
Користувачі часто переглядають сторінку по її заголовках. Важливо використовувати заголовки, щоб показати структуру документа.
<h1> заголовки необхідно використовувати для основних заголовків, а потім <h2> заголовок, менш важливий <h3> і т.д.
Примітка: Використовуйте HTML-заголовки тільки для заголовків. Не використовуйте заголовки, щоб зробити текст БІЛЬШИМ або жирним.
Великі заголовки
Кожен HTML заголовок має розмір за замовчуванням. Однак, ви можете вказати розмір для будь-якого заголовка з атрибутом style, використовуючи властивість CSS font-size:
HTML Горизонтальний роздільник
Тег <hr> визначає тематичний розрив на HTML сторінці і найчастіше відображається як горизонтальний роздільник (горизонтальна лінія).
Елемент <hr> використовується для поділу вмісту (або визначення зміни) на HTML сторінці.
Приклад
<h1>Це заголовок 1</h1>
<p>Це якийсь текст.</p>
<hr>
<h2>Це заголовок 2</h2>
<p>Це якийсь інший текст.</p>
<hr>
Спробуйте самі »
HTML елемент <head>
HTML елемент <head> (голова) - це контейнер для метаданих. Метадані HTML - це дані про документ HTML. Метадані не відображаються на сторінці, вони потрібні для службових цілей (пошукових роботів і вебдодатків).
Елемент <head> знаходиться між тегом <html> і тегом <body>:
Приклад
<!DOCTYPE html>
<html>
<head>
<title>Мій перший HTML</title>
<meta charset="UTF-8">
</head>
<body>
.
.
.
Спробуйте самі »
Примітка: Метадані зазвичай визначають заголовок документа, набір символів, стилі, скрипти й іншу метаінформацію.
Як переглянути вихідний код HTML?
Ви коли-небудь бачили вебсторінку і задавались питанням "Опачки! Як же вони це зробили?!"
Перегляд вихідного коду HTML:
Клацніть правою кнопкою миші сторінку HTML і виберіть "Переглянути джерело сторінки" (в Chrome) або "переглянути джерело" (в Edge), або "Вихідний код сторінки" (в Firefox), або "джерело сторінки" (в Opera) або щось схоже в інших браузерах. Відкриється вікно, що містить вихідний код HTML сторінки.
Дослідити HTML елемент:
Клацніть правою кнопкою миші елемент (або порожню область на сторінці) і виберіть "Переглянути код" або "Дослідити елемент", щоб побачити, із яких елементів складається сторінка (ви побачите і HTML, і CSS). Ви також можете редагувати HTML або CSS код на льоту в панелі, що відкривається - "Елементи або стилі".
HTML Вправи
HTML Довідник тегів
Довідник тегів містить додаткову інформацію про ці теги та їх атрибути.
Детальніше про теги та атрибути HTML ви дізнаєтеся в наступних розділах цього підручника.
| Тег | Опис |
|---|---|
| <html> | Визначає початок завантаження HTML документа |
| <body> | Визначає тіло документа |
| <head> | Контейнер для всіх елементів голови сторінки (назва, скрипти, стилі, метаінформація та ін.) |
| <h1> до <h6> | Визначає HTML заголовки |
| <hr> | Визначає тематичну зміну в змісті |
Для отримання повного списку всіх доступних HTML тегів, відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.
Запитання для самоконтролю
- Що таке HTML-заголовки?
- Навіщо потрібні HTML-заголовки?
- Які бувають заголовки на HTML-сторінках?
- Який тег визначає найбільший і найменший заголовок?
- Що таке горизонтальний роздільник на HTML-сторінці?
- Який тег визначає горизонтальний роздільник на HTML-сторінці?
- Для чого потрібен HTML-елемент head?
- Де на веб-сторінці знаходиться елемент head?
- Який тег використовується для запису назви веб-сторінки?
- Який тег використовується для збереження інформації, яку використовують браузери та пошукові системи?
- Як переглянути вихідний HTML-код в браузері?
- Як дослідити HTML-елемент за допомогою браузера?
