Пошук уроків, статей та іншого контенту
Навчитеся створювати заголовки h1–h6 і правильно будувати ієрархію заголовків на сторінці.
Заголовки допомагають структурувати вміст вебсторінки. В HTML для них використовують елементи від <h1> до <h6>:
<h1> — головний заголовок сторінки;
<h2> — заголовок великого розділу;
<h3> — підрозділ усередині <h2>;
<h4> — підрозділ усередині <h3>;
<h5> і <h6> — наступні рівні вкладеності.
Число в назві елемента показує рівень заголовка: що менше число, то вищий рівень.
<h1>Навчання веброзробки</h1>
<h2>HTML</h2>
<h3>Основи HTML</h3>
<h3>Форми</h3>
<h2>CSS</h2>
<h3>Селектори</h3>
<h3>Властивості тексту</h3>У цьому прикладі <h1> описує всю сторінку, <h2> — її основні розділи, а <h3> — підрозділи.
Заголовок створюють парним тегом:
<h1>Головний заголовок</h1>Текст між відкривальним і закривальним тегами буде показаний як заголовок.
У браузері заголовки мають стандартні стилі. Зазвичай <h1> відображається найбільшим, а <h6> — найменшим:
<h1>Заголовок першого рівня</h1>
<h2>Заголовок другого рівня</h2>
<h3>Заголовок третього рівня</h3>
<h4>Заголовок четвертого рівня</h4>
<h5>Заголовок п’ятого рівня</h5>
<h6>Заголовок шостого рівня</h6>Розмір тексту — не головне призначення заголовків. Їх використовують для опису структури документа, а не просто для отримання великого або жирного тексту.
Заголовки потрібно розташовувати в логічному порядку. Наприклад, сторінку статті можна побудувати так:
<h1>Як створити вебсторінку</h1>
<h2>Підготовка HTML-документа</h2>
<h3>Створення файлу</h3>
<h3>Додавання базової структури</h3>
<h2>Додавання тексту</h2>
<h3>Абзаци</h3>
<h3>Заголовки</h3>
<h2>Оформлення сторінки</h2>
<h3>Підключення CSS</h3>Структура має такий вигляд:
<h1> — уся стаття;
<h2> — основні розділи;
<h3> — підрозділи всередині основних розділів.
Якщо всередині підрозділу потрібно створити ще один рівень, можна використати <h4>:
<h1>Курс HTML</h1>
<h2>Розділ 1. Основи</h2>
<h3>Урок 1. Структура документа</h3>
<h4>Елемент doctype</h4>
<h4>Елемент html</h4>Не потрібно використовувати <h4> лише тому, що він виглядає меншим. Він має бути змістовно вкладеним у <h3>.
<h1><h1> зазвичай містить назву або головну тему сторінки:
<h1>Рецепт українського борщу</h1>На сторінці статті головним заголовком може бути її назва:
<h1>Як працюють заголовки в HTML</h1>На сторінці товару — назва товару:
<h1>Ноутбук для навчання</h1>На головній сторінці сайту — назва сайту або головна тема:
<h1>Онлайн-бібліотека</h1>Для навчальних прикладів і більшості звичайних сторінок зручно використовувати один основний <h1>, а інші розділи будувати за допомогою <h2> і нижчих рівнів.
Нижче наведено простий HTML-документ із правильною ієрархією заголовків:
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>План навчання HTML</title>
</head>
<body>
<!-- Головна тема всієї сторінки -->
<h1>План навчання HTML</h1>
<!-- Перший великий розділ -->
<h2>Основи HTML</h2>
<p>HTML описує структуру вебсторінки.</p>
<h3>Текстові елементи</h3>
<p>До текстових елементів належать абзаци та заголовки.</p>
<h3>Списки</h3>
<p>Списки допомагають упорядковувати інформацію.</p>
<!-- Другий великий розділ -->
<h2>Структура документа</h2>
<p>HTML-документ складається з вкладених елементів.</p>
<h3>Службова інформація</h3>
<p>У елементі head зберігається службова інформація сторінки.</p>
<h3>Видимий вміст</h3>
<p>У елементі body міститься вміст, який бачить користувач.</p>
<!-- Третій великий розділ -->
<h2>Наступні кроки</h2>
<p>Після вивчення HTML можна переходити до CSS.</p>
</body>
</html>Цей документ можна зберегти у файлі index.html і відкрити в браузері.
Логічна ієрархія важлива не лише для зовнішнього вигляду. Допоміжні технології, зокрема програми читання з екрана, використовують заголовки для навігації сторінкою.
Користувач може швидко перейти:
до головного заголовка сторінки;
до потрібного розділу;
до конкретного підрозділу.
Тому заголовок має описувати зміст наступного розділу. Наприклад, заголовок Переваги HTML інформативніший за заголовок Розділ 2.
HTML визначає зміст і рівень заголовка, а CSS — його зовнішній вигляд. Якщо потрібно змінити розмір або колір, не варто замінювати <h2> на <h4>. Потрібно залишити правильний HTML-елемент і використати CSS.
<h1>Моя сторінка</h1>
<h2 class="small-heading">Про сайт</h2>
<style>
h1 {
color: darkblue;
}
.small-heading {
font-size: 18px;
color: darkgreen;
}
</style>У цьому прикладі <h2> залишається заголовком другого рівня, навіть якщо його розмір змінено за допомогою CSS.
Неправильно:
<h1>Невеликий підпис</h1>Якщо текст є звичайним підписом, краще використати абзац:
<p>Невеликий підпис</p>Розмір тексту можна змінити за допомогою CSS.
Небажана структура:
<h1>Кулінарні рецепти</h1>
<h3>Супи</h3>
<h5>Овочеві супи</h5>Тут пропущено <h2> і <h4>. Краще побудувати рівні послідовно:
<h1>Кулінарні рецепти</h1>
<h2>Супи</h2>
<h3>Овочеві супи</h3>Заголовок має містити зрозумілий опис розділу:
<h2>Розділ</h2>Такий текст майже не пояснює зміст. Краще:
<h2>Налаштування профілю</h2><h1> для кожного розділуНе потрібно робити всі заголовки <h1>:
<h1>HTML</h1>
<h1>CSS</h1>
<h1>JavaScript</h1>Для сторінки з однією спільною темою логічніше використати:
<h1>Веброзробка</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>JavaScript</h2>Перед додаванням заголовка поставте собі запитання:
Чи описує він тему всієї сторінки? Використайте <h1>.
Чи це великий розділ сторінки? Використайте <h2>.
Чи належить цей розділ до попереднього <h2>? Використайте <h3>.
Чи є це ще глибшим підрозділом? Використайте <h4>, <h5> або <h6> за потреби.
Вибирайте рівень за змістом, а не за бажаним розміром тексту.
Заголовки в HTML створюють елементи <h1>–<h6>.
<h1> описує головну тему сторінки.
<h2> використовують для основних розділів.
<h3> та нижчі рівні використовують для підрозділів.
Заголовки потрібно розташовувати в логічній ієрархії.
Не слід вибирати рівень заголовка лише через його стандартний розмір.
Для зміни вигляду заголовків використовують CSS.
Зрозумілі заголовки покращують навігацію сторінкою та її доступність.