<h1>-<h6> - HTML-елементи заголовків

HTML-елементи заголовків <h1>-<h6> представляють шість рівнів заголовків секцій. <h1> є найвищим рівнем секції, а <h6> — найнижчим.

Елементи заголовків від <h1> до <h6> використовуються для створення ієрархічної структури контенту на веб-сторінці. <h1> є найважливішим заголовком і зазвичай використовується для назви сторінки або основного заголовка статті. Наступні рівні (<h2>, <h3> і т.д.) використовуються для підзаголовків, створюючи логічну структуру документа.

Правильне використання заголовків є критично важливим для доступності та SEO. Пошукові системи використовують заголовки для індексації структури та змісту веб-сторінок, а екранні зчитувачі — для навігації користувачів по контенту.

Не використовуйте заголовки для зміни розміру тексту. Для цього слід використовувати CSS властивість font-size. Використовуйте заголовки лише для створення структури документа.

Тег <h> приклад використання в HTML
HTML
<h1>Головний заголовок</h1>
<h2>Підзаголовок</h2>
<h3>Під-підзаголовок</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

Атрибути

Цей тег може мати глобальні атрибути.

Технічне резюме

Категорія контенту

Потоковий контент, заголовковий контент, відчутний контент.

Дозволений вміст

Фразовий контент.

Пропуск тегів

Жоден, початковий та кінцевий теги є обов’язковими.

Дозволені батьківські елементи

Будь-який елемент, що приймає потоковий контент.

Роль ARIA

heading

DOM інтерфейс

HTMLHeadingElement

Приклади використання

Результат
<h1>Основні принципи веб-розробки</h1>
<p>Веб-розробка базується на трьох основних технологіях: HTML, CSS та JavaScript.</p>
<h2>HTML: Структура</h2>
<p>HTML відповідає за структуру та семантику контенту.</p>
<h2>CSS: Стилізація</h2>
<p>CSS використовується для оформлення та візуального представлення контенту.</p>
<h3>Селектори</h3>
<p>Селектори дозволяють вибирати елементи для стилізації.</p>
<h3>Властивості</h3>
<p>Властивості визначають, як саме стилізувати обрані елементи.</p>
<h2>JavaScript: Інтерактивність</h2>
<p>JavaScript додає динамічність та інтерактивність на сторінку.</p>

Стилі за замовчуванням

CSS
h1, h2, h3, h4, h5, h6 {
  display: block;
  font-weight: bold;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h1 {
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
}

h2 {
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
}

h3 {
  font-size: 1.17em;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

h4 {
  margin-block-start: 1.33em;
  margin-block-end: 1.33em;
}

h5 {
  font-size: .83em;
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

h6 {
  font-size: .67em;
  margin-block-start: 2.33em;
  margin-block-end: 2.33em;
}

Підтримка браузерів

Данні відсутні

Останнє оновлення: