-->

Перша категорія: Структура документа

HTML тег: <!DOCTYPE>

Опис

Декларація типу документа, яка повідомляє браузеру, яку версію HTML використовує документ. У HTML5 вона виглядає просто як <!DOCTYPE html>.

Приклад

<!DOCTYPE html>

CSS за замовчуванням

Це декларативний тег, який не має візуального відображення, тому CSS не застосовується.

Пояснення CSS-властивостей

Не застосовується.

Основні характеристики

Тип
службовий
Семантичний
ні
Вміст
немає вмісту

Атрибути

Не підтримує атрибутів.

Доступність (a11y)

Не має значення для доступності, але обов’язкова для коректного рендерингу сторінки.

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

Підтримується всіма браузерами.

Поширені помилки

  • Відсутність декларації <!DOCTYPE html> призводить до запуску браузером режиму сумісності (quirks mode).
  • Некоректна або застаріла декларація може спричинити проблеми з відображенням.

Кращі практики

Завжди використовувати <!DOCTYPE html> на початку HTML-документу для забезпечення стандартного режиму рендерингу.

Зв’язки з іншими тегами

Використовується спільно з тегами <html>, <head>, <body> як частина базової структури документа.

Семантичні альтернативи

Немає.

Сумісність з HTML версіями

HTML5 (сучасна), раніше використовували складніші декларації в HTML4/XHTML.

SEO вплив

Не має прямого впливу, але необхідна для правильного парсингу документа.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <html>

Опис

Кореневий елемент HTML-документа. Всі інші теги мають бути вкладені всередині <html>.

Приклад

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="UTF-8">
    <title>Заголовок сторінки</title>
  </head>
  <body>
    <p>Вміст сторінки</p>
  </body>
</html>

CSS за замовчуванням

display: block;
  • display: block; — хоча <html> не відображається безпосередньо, він поводиться як блочний контейнер для всієї сторінки.

Основні характеристики

Тип
блочний (кореневий)
Семантичний
так
Вміст
лише <head> і <body>

Атрибути

Глобальні атрибути
id, class, style, title, lang, dir, data-*
Специфічні атрибути
  • lang — задає мову документа (наприклад, lang="uk" для української).
  • xmlns (в XML/MathML)

Доступність (a11y)

Встановлення атрибута lang є важливим для доступності, оскільки допомагає екранним читачам правильно вимовляти текст.

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

Підтримується усіма браузерами, обов'язковий для коректної структури документа.

Поширені помилки

  • Відсутність або неправильне вкладення <head> та <body>.
  • Використання кількох <html> елементів на сторінці.

Кращі практики

Завжди використовуйте lang, правильно структуруйте <head> і <body> всередині <html>.

Зв’язки з іншими тегами

Містить лише два дочірні елементи: <head> та <body>.

Семантичні альтернативи

Немає.

Сумісність з HTML версіями

HTML 2.0 і вище. У HTML5 тег став ще простішим.

SEO вплив

Безпосереднього впливу немає, але правильне використання lang і структурної розмітки в <html> впливає на індексацію.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <html>

Опис

Кореневий елемент HTML-документа. Всі інші теги мають бути вкладені всередині <html>.

Приклад

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="UTF-8">
    <title>Заголовок сторінки</title>
  </head>
  <body>
    <p>Вміст сторінки</p>
  </body>
</html>

CSS за замовчуванням

display: block;
  • display: block; — хоча <html> не відображається безпосередньо, він поводиться як блочний контейнер для всієї сторінки.

Основні характеристики

Тип
блочний (кореневий)
Семантичний
так
Вміст
лише <head> і <body>

Атрибути

Глобальні атрибути
id, class, style, title, lang, dir, data-*
Специфічні атрибути
  • lang — задає мову документа (наприклад, lang="uk" для української).
  • xmlns (в XML/MathML)

Доступність (a11y)

Встановлення атрибута lang є важливим для доступності, оскільки допомагає екранним читачам правильно вимовляти текст.

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

Підтримується усіма браузерами, обов'язковий для коректної структури документа.

Поширені помилки

  • Відсутність або неправильне вкладення <head> та <body>.
  • Використання кількох <html> елементів на сторінці.

Кращі практики

Завжди використовуйте lang, правильно структуруйте <head> і <body> всередині <html>.

Зв’язки з іншими тегами

Містить лише два дочірні елементи: <head> та <body>.

Семантичні альтернативи

Немає.

Сумісність з HTML версіями

HTML 2.0 і вище. У HTML5 тег став ще простішим.

SEO вплив

Безпосереднього впливу немає, але правильне використання lang і структурної розмітки в <html> впливає на індексацію.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <head>

Опис

Елемент <head> містить метадані документа: заголовок, кодування, підключення стилів, скриптів, і іншу службову інформацію. Не відображається на сторінці напряму.

Приклад

<head>
  <meta charset="UTF-8">
  <title>Заголовок сторінки</title>
  <link rel="stylesheet" href="styles.css">
  <script src="main.js"></script>
</head>

CSS за замовчуванням

display: none;

Вміст <head> не відображається візуально, тому він має display: none;.

Основні характеристики

Тип
службовий (невидимий)
Семантичний
так
Вміст
лише певні метаелементи: <title>, <meta>, <link>, <style>, <script>, <base>, <noscipt>

Атрибути

Глобальні атрибути
не рекомендовано використовувати, але технічно можливі: id, class, lang
Специфічні атрибути
немає

Доступність (a11y)

Непряма. Правильне використання <meta charset>, <title> і мови в <html lang> допомагає скрин-рідерам краще орієнтуватися.

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

Повна підтримка всіма сучасними браузерами. Обов’язковий для повноцінного HTML-документу.

Поширені помилки

  • Додавання в <head> вмісту, який не є метаданими (наприклад, <div>, <p> тощо).
  • Використання більше одного <title>.

Кращі практики

  • Використовуйте лише дозволені елементи.
  • Завжди додавайте <meta charset="UTF-8"> на початку.
  • Вказуйте <title> — він відображається в браузерній вкладці.

Зв’язки з іншими тегами

Повинен бути дочірнім елементом <html>, і має бути перед <body>.

Семантичні альтернативи

Немає.

Сумісність з HTML версіями

Використовується у всіх версіях HTML, від HTML2 до HTML5.

SEO вплив

Ключовий. <title> та <meta name="description"> усередині <head> безпосередньо впливають на індексацію в Google.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <title>

Опис

Визначає заголовок документа, який відображається у вкладці браузера, а також використовується у результатах пошуку. Є обов’язковим елементом у <head>.

Приклад

<head>
      <title>Моя перша сторінка</title>
    </head>

CSS за замовчуванням

CSS не застосовується — елемент невидимий і не рендериться на сторінці.

Основні характеристики

Тип
службовий, текстовий
Семантичний
так
Вміст
тільки текст

Атрибути

Не має жодного специфічного чи глобального атрибута (використання class, id — не рекомендоване).

Доступність (a11y)

Екранні читачі використовують <title> для ідентифікації сторінки. Користувачі теж бачать його у вкладці, тому його важливо чітко формулювати.

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

Підтримується повсюдно. Обов'язковий згідно з HTML-специфікацією.

Поширені помилки

  • Відсутній <title> у документі — погано для SEO.
  • Використання більше одного <title> у <head>.
  • Занадто довгий або нерелевантний текст.

Кращі практики

  • Довжина заголовка — до 60 символів для оптимального відображення в пошукових системах.
  • Має бути унікальним для кожної сторінки.
  • Перші слова мають бути найбільш значущими.

Зв’язки з іншими тегами

Використовується тільки всередині <head>, має бути лише один.

Семантичні альтернативи

Немає. Для виведення назви на сторінці використовуйте <h1>.

Сумісність з HTML версіями

HTML 2.0 і вище. У HTML5 все ще обов’язковий елемент.

SEO вплив

Один з головних елементів для SEO. Використовується пошуковими системами для формування заголовку в результатах видачі.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <meta>

Опис

Службовий елемент для надання метаданих про HTML-документ: кодування, опис, ключові слова, автор, viewport, соціальні мережі тощо.

Приклади

<meta charset="UTF-8">
    <meta name="description" content="Це сторінка про HTML">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="FlyFayer">
    <meta property="og:title" content="Моя HTML сторінка">

CSS за замовчуванням

CSS не застосовується. Елемент не відображається на сторінці.

Основні характеристики

Тип
службовий, самозакривний
Семантичний
так
Вміст
не має

Атрибути

charset
Визначає кодування сторінки, наприклад: <meta charset="UTF-8">.
name
Ім’я метаданих: description, keywords, viewport, author тощо.
content
Значення для атрибута name або http-equiv.
http-equiv
Замість HTTP-заголовків (наприклад: refresh, content-security-policy).
property
Для Open Graph (Facebook, LinkedIn), наприклад: og:title, og:image.

Доступність (a11y)

Непряма. Важливо для налаштування масштабування (viewport) та правильної інтерпретації мови (charset).

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

Повна підтримка всіма браузерами. Деякі атрибути можуть ігноруватися, якщо вказані некоректно.

Поширені помилки

  • Відсутність charset на початку <head> — може спричинити проблеми з відображенням символів.
  • Використання застарілих значень: keywords більше не має SEO-ваги.
  • Плутанина між name і property.

Кращі практики

  • Завжди вказуйте <meta charset="UTF-8"> першою в <head>.
  • Використовуйте description з чітким змістом для SEO.
  • Налаштовуйте viewport для адаптивності.

Зв’язки з іншими тегами

Застосовується лише в межах <head>. Використовується разом із <title>, <link>, <script>.

Семантичні альтернативи

Немає прямих альтернатив. Для Open Graph і Twitter Cards використовується аналогічна синтаксична форма.

Сумісність з HTML версіями

HTML 2.0 і вище. charset у короткій формі (<meta charset="UTF-8">) з’явився в HTML5.

SEO вплив

Високий. Важливо для description, viewport, Open Graph/SEO структурованих даних. keywords більше не враховуються пошуковими системами.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <link>

Опис

Тег <link> використовується для підключення зовнішніх ресурсів, найчастіше — таблиць стилів (CSS), іконок (favicon), шрифтів, та ін. Розташовується лише в <head>.

Приклади

<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="apple-touch-icon" href="/icon.png">

CSS за замовчуванням

Не має стилів, не рендериться на сторінці. Впливає лише на поведінку браузера.

Основні характеристики

Тип
службовий, самозакривний
Семантичний
ні
Вміст
не має

Атрибути

rel
Визначає тип зв'язку з ресурсом. Наприклад: stylesheet, icon, preload.
href
Шлях до зовнішнього ресурсу (URL).
type
Тип MIME (наприклад, text/css, image/x-icon).
media
Задає, для яких медіа-типів застосовується стиль (наприклад, screen, print).
as
Для rel="preload": вказує тип ресурсу (script, style, font).
crossorigin
Задає політику CORS при завантаженні ресурсів з інших доменів.

Доступність (a11y)

Непряма. rel="icon" використовується браузером для відображення іконки сторінки, що зручно для користувачів.

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

Широко підтримується всіма сучасними браузерами. Поведінка залежить від значення rel.

Поширені помилки

  • Використання без обов’язкових атрибутів rel або href.
  • Невірне MIME-значення в type.
  • Неправильне розташування поза <head>.

Кращі практики

  • Підключайте CSS через rel="stylesheet" з коректним href.
  • Для іконок використовуйте rel="icon" з type="image/x-icon".
  • Використовуйте preload та preconnect для оптимізації продуктивності.

Зв’язки з іншими тегами

Зазвичай використовується разом із <style>, <meta>, <script> у <head>.

Семантичні альтернативи

Для вбудованих стилів — тег <style>.

Сумісність з HTML версіями

Підтримується з HTML 2.0. У HTML5 отримав нові значення rel (наприклад, preload, dns-prefetch).

SEO вплив

Опосередкований. Важливий для завантаження стилів, шрифтів, іконок — усе це впливає на продуктивність, що враховується пошуковими системами.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <style>

Опис

Елемент <style> дозволяє вставити CSS-стилі прямо в HTML-документ. Розташовується переважно в <head>.

Приклад

<head>
  <style>
    body {
      background-color: #f2f2f2;
      font-family: Arial;
    }
    h1 {
      color: #333;
    }
  </style>
</head>

CSS за замовчуванням

Не застосовується. Сам тег не стилізується — він містить CSS-код для інших елементів.

Основні характеристики

Тип
службовий
Семантичний
умовно
Вміст
текстовий вміст — CSS-правила

Атрибути

type
Тип контенту. Зазвичай text/css. У HTML5 можна опускати.
media
Задає, для яких пристроїв або умов застосовуються стилі (наприклад, screen, print).
scoped (застарілий)
Призначався для обмеження стилів до батьківського елемента. Браузерами не підтримується.

Доступність (a11y)

Не впливає напряму, але стилі можуть суттєво покращити доступність інтерфейсу.

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

Повна підтримка всіх сучасних браузерів.

Поширені помилки

  • Розміщення CSS поза <style> або <head>.
  • Забутий закриваючий тег </style>.
  • Неправильний синтаксис CSS усередині тегу.

Кращі практики

  • Використовуйте для прототипів або невеликих сторінок.
  • Для великих проєктів використовуйте зовнішні таблиці стилів (<link>).
  • Не вставляйте JS у <style>.

Зв’язки з іншими тегами

Замість нього часто використовується <link> для підключення зовнішніх CSS-файлів.

Семантичні альтернативи

<link> для зовнішніх стилів.

Сумісність з HTML версіями

HTML 3.2 і вище. У HTML5 type="text/css" не обов’язковий.

SEO вплив

Непрямий. Швидкість відображення стилів може впливати на показники сторінки в пошукових системах.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <script>

Опис

Тег <script> використовується для вставки або підключення JavaScript-коду до HTML-документу. Може знаходитись у <head> або <body>.

Приклади

<!-- Вбудований скрипт -->
<script>
  console.log("Привіт, JavaScript!");
</script>

<!-- Зовнішній файл -->
<script src="script.js"></script>

<!-- З відкладеним виконанням -->
<script src="main.js" defer></script>

<!-- Асинхронне завантаження -->
<script src="ads.js" async></script>

CSS за замовчуванням

Не рендериться. Не має стилів.

Основні характеристики

Тип
службовий
Семантичний
ні
Вміст
JS-код або зовнішнє посилання

Атрибути

src
Шлях до зовнішнього JavaScript-файлу.
type
Тип скрипту, зазвичай text/javascript. У HTML5 можна не вказувати.
defer
Виконує скрипт після повного завантаження документа, зберігаючи порядок.
async
Завантажує скрипт асинхронно — виконується відразу після завантаження, незалежно від інших.
nomodule
Скрипт не виконується в браузерах, які підтримують ES6-модулі. Для сумісності зі старими браузерами.
crossorigin
Політика CORS (наприклад: anonymous, use-credentials).
integrity
Хеш для перевірки цілісності скрипта (SRI).
referrerpolicy
Вказує, як обробляється HTTP-заголовок Referer.

Доступність (a11y)

JS може покращувати або погіршувати доступність, залежно від реалізації (наприклад, модальні вікна без фокусу = ❌).

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

Повна підтримка всіх сучасних браузерів. async і defer підтримуються з IE9+.

Поширені помилки

  • Підключення скрипта без defer у <head>, що блокує рендеринг.
  • Забутий закриваючий тег або неправильний шлях у src.
  • Змішування async і defer одночасно.

Кращі практики

  • Для зовнішніх скриптів — ставити defer.
  • Уникати вбудованих скриптів, якщо можливо — краще тримати їх в окремих файлах.
  • Використовуйте SRI (Subresource Integrity) для сторонніх скриптів.

Зв’язки з іншими тегами

Може йти разом із <style>, <noscript>, <link> у <head> або перед </body>.

Семантичні альтернативи

<noscript> — для випадків, коли JavaScript вимкнений у браузері.

Сумісність з HTML версіями

З HTML 3.2. У HTML5 — атрибути async, defer, nomodule, type="module".

SEO вплив

JavaScript не повинен блокувати основний контент. Google індексує динамічні сторінки, але не завжди швидко.

Додаткові посилання

Позначка

— (без позначки)

🔹 Ми завершили блок тегів, які використовуються в head.

HTML тег: <body>

Опис

Елемент <body> містить увесь вміст сторінки, який бачить користувач: текст, зображення, посилання, відео, розмітку тощо. Це основний контейнер візуального вмісту HTML-документа.

Приклад

<!DOCTYPE html>
    <html lang="uk">
      <head>
        <meta charset="UTF-8">
        <title>Приклад сторінки</title>
      </head>
      <body>
        <h1>Привіт, світ!</h1>
        <p>Це перший параграф у тілі документа.</p>
      </body>
    </html>

CSS за замовчуванням

Залежно від браузера, але типово:

body {
      display: block;
      margin: 8px;
    }

Цей відступ (margin) часто обнуляється у CSS-ресетах або нормалізаторах.

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
весь візуальний вміст сторінки (напр. <header>, <main>, <footer>, текст, медіа тощо)

Атрибути

onload
Викликає JavaScript при завантаженні сторінки.
onunload
Викликає функцію при закритті сторінки (рідко використовується).
background, bgcolor, text, link (застарілі)
HTML 4 атрибути для стилізації — сьогодні слід уникати, замість цього використовувати CSS.

Доступність (a11y)

Сам по собі не впливає на доступність, але правильна структура всередині <body> (напр. <main>, заголовки, області навігації) є ключовою.

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

Підтримується в усіх браузерах, починаючи з найперших версій. Обов’язковий елемент.

Поширені помилки

  • Використання кількох <body> на одній сторінці (❌ недопустимо).
  • Неправильне розміщення скриптів до закриття <body>.
  • Неправильна вкладеність: <body> не може бути вкладеним у інші елементи.

Кращі практики

  • Використовуйте <main>, <header>, <footer> для розмітки вмісту.
  • Поміщайте скрипти перед закриттям </body>, якщо не використовуєте defer.

Зв’язки з іншими тегами

Йде після <head>. Включає: <header>, <main>, <footer>, <section>, інше.

Семантичні альтернативи

Немає — <body> обов’язковий елемент HTML.

Сумісність з HTML версіями

Усі версії HTML (з 2.0 до HTML5).

SEO вплив

Не напряму, але правильна структура вмісту всередині <body> критична для SEO.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <header>

Опис

Тег <header> визначає секцію заголовка документа або розділу. Зазвичай містить заголовки, навігацію, логотипи, пошукові форми або інші елементи, які пов’язані з початком розділу.

Приклад

<header>
      <h1>Мій сайт</h1>
      <nav>
        <ul>
          <li><a href="#">Головна</a></li>
          <li><a href="#">Про нас</a></li>
          <li><a href="#">Контакти</a></li>
        </ul>
      </nav>
    </header>

CSS за замовчуванням

header {
      display: block;
    }

За замовчуванням — блочний елемент.

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
будь-який вміст, типово — заголовки, навігація, інші блоки

Атрибути

Глобальні атрибути
Підтримує всі глобальні атрибути HTML, наприклад id, class, style, title тощо.

Доступність (a11y)

Важливо не вкладати більше ніж один <header> у один розділ або статтю. Застосування правильних заголовків і семантики покращує доступність.

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

Підтримується усіма сучасними браузерами, включно з IE11 (частково).

Поширені помилки

  • Вкладення <header> всередину <header> без логічної структури.
  • Використання тегу <header> для всього вмісту сторінки, замість лише заголовка.

Кращі практики

  • Використовуйте <header> для групування заголовків і навігаційних елементів.
  • Уникайте надмірного вкладення.

Зв’язки з іншими тегами

Часто містить <nav>, <h1>-<h6>, <img> (логотип), інші структурні елементи.

Семантичні альтернативи

Якщо потрібен заголовок для всього документа, використовуйте <header> у <body>. Для внутрішніх секцій — можна використовувати <section> із власним <header>.

Сумісність з HTML версіями

Введений у HTML5.

SEO вплив

Правильне використання <header> допомагає структурувати контент для пошукових систем.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <main>

Опис

Елемент <main> визначає головний контент документа або веб-додатку. Він містить контент, який є унікальним для сторінки, відмінним від навігації, заголовків, підвалів або повторюваних блоків.

Приклад

<body>
  <header>...</header>
  <main>
    <article>
      <h1>Заголовок статті</h1>
      <p>Основний текст контенту...</p>
    </article>
  </main>
  <footer>...</footer>
</body>

CSS за замовчуванням

main {
  display: block;
}

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
будь-який вміст, який є унікальним і основним на сторінці

Атрибути

Глобальні атрибути
Підтримує всі глобальні атрибути (id, class, style, title і т.д.)

Доступність (a11y)

Тег <main> полегшує навігацію для скрінрідерів, вказуючи основний вміст сторінки.

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

Підтримка у всіх сучасних браузерах, у тому числі Edge, Chrome, Firefox, Safari.

Поширені помилки

  • Використання більше одного <main> на сторінці (❌ недопустимо).
  • Вкладення <main> у <article> чи інший розділ (❌ не рекомендовано).

Кращі практики

  • Використовуйте <main> лише один раз на сторінці.
  • Не вкладайте у <main> блоки, які повторюються на всіх сторінках, наприклад навігацію чи футер.

Зв’язки з іншими тегами

Зазвичай розміщується після <header> і перед <footer>.

Семантичні альтернативи

Немає альтернатив; тег <main> — спеціальний для головного контенту.

Сумісність з HTML версіями

Введений у HTML5.

SEO вплив

Допомагає пошуковим системам ідентифікувати основний контент сторінки.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <section>

Опис

Тег <section> визначає розділ документа, який тематично об'єднує контент. Використовується для групування пов’язаного за темою вмісту.

Приклад

<section>
  <h2>Наші послуги</h2>
  <p>Опис послуг компанії...</p>
</section>

CSS за замовчуванням

section {
  display: block;
  margin: 1em 0;
}

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
будь-який вміст, логічно згрупований за темою

Атрибути

Глобальні атрибути
Підтримує всі глобальні атрибути (id, class, style, title, aria-* тощо)

Доступність (a11y)

Рекомендовано використовувати з відповідними заголовками (<h1>-<h6>) для покращення структури документа.

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

Підтримується всіма сучасними браузерами.

Поширені помилки

  • Використання <section> без тематичного змісту (❌ не рекомендується).
  • Вкладення <section> без заголовка (⚠️ краще додавати заголовок).

Кращі практики

  • Використовуйте <section> для логічного розділення контенту.
  • Завжди додавайте заголовок усередині <section>.

Зв’язки з іншими тегами

Часто містить <article>, <header>, <footer>, інші блочні елементи.

Семантичні альтернативи

Для менших груп вмісту можна використовувати <div> без семантики.

Сумісність з HTML версіями

Введений у HTML5.

SEO вплив

Допомагає пошуковим системам структурувати контент і покращує семантичне розуміння сторінки.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <article>

Опис

Елемент <article> визначає самостійний, автономний контент, який може бути розповсюджений або використаний окремо від решти сторінки. Наприклад, стаття, допис у блозі, новина, коментар, огляд.

Приклад

<article>
  <h2>Огляд нової книги</h2>
  <p>Це огляд книги, який можна читати окремо від інших частин сайту.</p>
</article>

CSS за замовчуванням

article {
  display: block;
  margin: 1em 0;
}

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
будь-який вміст, який логічно представляє автономну одиницю

Атрибути

Глобальні атрибути
Підтримує всі глобальні атрибути (id, class, style, title і т.д.)

Доступність (a11y)

Допомагає скрінрідерам розпізнати автономні частини контенту.

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

Підтримується у всіх сучасних браузерах.

Поширені помилки

  • Використання <article> для неавтономного контенту (❌ неправильне застосування).
  • Вкладення <article> один в одного без потреби (❌ уникайте зайвого вкладення).

Кращі практики

  • Використовуйте для контенту, який може існувати окремо.
  • Обов’язково додавайте заголовок усередині <article>.

Зв’язки з іншими тегами

Може бути вкладений у <section>, <main> або інші структурні контейнери.

Семантичні альтернативи

Для менш структурованого вмісту можна використовувати <div> без семантики.

Сумісність з HTML версіями

Введений у HTML5.

SEO вплив

Покращує структуру сторінки для пошукових систем, виділяючи автономні частини контенту.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <aside>

Опис

Елемент <aside> використовується для контенту, який є побічним або додатковим по відношенню до основного вмісту документа чи секції. Часто це бокова панель, цитати, посилання або віджети.

Приклад

<article>
  <h2>Головна стаття</h2>
  <p>Основний контент тут...</p>
  <aside>
    <h3>Корисні посилання</h3>
    <ul>
      <li><a href="#">Детальніше</a></li>
      <li><a href="#">Ресурси</a></li>
    </ul>
  </aside>
</article>

CSS за замовчуванням

aside {
  display: block;
  margin: 1em 0;
}

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
додатковий або побічний контент, не обов’язково пов’язаний з основним

Атрибути

Глобальні атрибути
Підтримує всі глобальні атрибути (id, class, style, title, aria-* тощо)

Доступність (a11y)

Використання <aside> допомагає користувачам скрінрідерів ідентифікувати додатковий контент.

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

Підтримується всіма сучасними браузерами.

Поширені помилки

  • Використання <aside> для основного контенту (❌ некоректно).
  • Вкладення <aside> всередину інших додаткових блоків без потреби.

Кращі практики

  • Використовуйте для побічного контенту, який доповнює основний.
  • Розміщуйте в контексті, де логічно відокремлює додаткову інформацію.

Зв’язки з іншими тегами

Зазвичай розташовується поруч із <article>, <section> чи іншими блоками контенту.

Семантичні альтернативи

Можна використовувати <div>, але втрачається семантика додаткового вмісту.

Сумісність з HTML версіями

Введений у HTML5.

SEO вплив

Допомагає пошуковим системам розуміти структуру сторінки, виділяючи додатковий контент.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <footer>

Опис

Елемент <footer> визначає футер (нижній колонтитул) розділу або документа. Зазвичай містить інформацію про автора, копірайти, посилання на контакти, політику конфіденційності тощо.

Приклад

<footer>
  <p>© 2025 Компанія "Приклад". Всі права захищені.</p>
  <nav>
    <ul>
      <li><a href="/privacy">Політика конфіденційності</a></li>
      <li><a href="/contact">Контакти</a></li>
    </ul>
  </nav>
</footer>

CSS за замовчуванням

footer {
  display: block;
  margin: 1em 0;
}

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
контент, пов’язаний із розділом або документом

Атрибути

Глобальні атрибути
Підтримує всі глобальні атрибути HTML (id, class, style, title тощо)

Доступність (a11y)

Футер допомагає користувачам скрінрідерів зрозуміти, де закінчується розділ або сторінка.

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

Підтримується усіма сучасними браузерами.

Поширені помилки

  • Використання <footer> для інших частин сторінки, крім нижнього колонтитулу (❌ не рекомендується).
  • Вкладення одного футера в інший без логічної потреби.

Кращі практики

  • Використовуйте для інформації про автора, контакти, копірайти.
  • Уникайте надмірного вмісту у футері.

Зв’язки з іншими тегами

Зазвичай розташовується внизу <body> або всередині секцій, статей.

Семантичні альтернативи

Можна використати <div>, але втрачається семантика.

Сумісність з HTML версіями

Введений у HTML5.

SEO вплив

Покращує структуру сторінки та допомагає пошуковим системам краще розуміти розміщення інформації.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <nav>

Опис

Елемент <nav> позначає розділ сторінки, який містить навігаційні посилання на інші частини сайту або зовнішні ресурси.

Приклад

<nav>
  <ul>
    <li><a href="/home">Головна</a></li>
    <li><a href="/about">Про нас</a></li>
    <li><a href="/contact">Контакти</a></li>
  </ul>
</nav>

CSS за замовчуванням

nav {
  display: block;
  margin: 1em 0;
}

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
колекція навігаційних посилань

Атрибути

Глобальні атрибути
Підтримує всі глобальні атрибути (id, class, style, title, aria-* тощо)

Доступність (a11y)

Допомагає користувачам скрінрідерів швидко переходити до навігації.

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

Підтримується усіма сучасними браузерами.

Поширені помилки

  • Використання <nav> для невеликих груп посилань, які не є навігаційними (❌ уникайте).
  • Вкладення одного <nav> у інший без потреби.

Кращі практики

  • Використовуйте для основної навігації сайту або великих навігаційних блоків.
  • Не обробляйте як навігацію дрібні групи посилань, наприклад соцмережі.

Зв’язки з іншими тегами

Може містити <ul>, <ol>, <a> та інші навігаційні елементи.

Семантичні альтернативи

Для простих груп посилань можна використовувати <div>, але без семантики навігації.

Сумісність з HTML версіями

Введений у HTML5.

SEO вплив

Покращує індексацію навігаційних посилань пошуковими системами.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <h1>

Опис

Елемент <h1> задає найвищий рівень заголовка в HTML-документі. Використовується для позначення основної теми сторінки або розділу.

Приклад

<h1>Вітаємо на нашому сайті</h1>

CSS за замовчуванням

h1 {
  display: block;
  font-size: 2em;
  margin: 0.67em 0;
  font-weight: bold;
}

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
Поточний текст або інлайн-елементи, які утворюють заголовок

Атрибути

Глобальні атрибути
Підтримує всі глобальні атрибути (id, class, style, title, aria-* тощо)

Доступність (a11y)

Заголовки допомагають користувачам скрінрідерів орієнтуватися в структурі сторінки.

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

Підтримується всіма сучасними браузерами.

Поширені помилки

  • Використання декількох тегів <h1> на одній сторінці без логічної структури (⚠️ не рекомендується без сенсу).
  • Використання заголовків поза контекстом структури документа.

Кращі практики

  • Використовуйте один <h1> для основного заголовка сторінки (хоча HTML5 дозволяє кілька в різних секціях).
  • Дотримуйтесь логічної ієрархії заголовків (<h1>, <h2>, <h3> тощо).

Зв’язки з іншими тегами

Зазвичай міститься у <header> або на початку <section>, <article>.

Семантичні альтернативи

Немає прямої альтернативи, заголовки мають важливу семантичну роль.

Сумісність з HTML версіями

Підтримується з ранніх версій HTML.

SEO вплив

Заголовки допомагають пошуковим системам розуміти структуру і тематику сторінки.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <h2>

Опис

Елемент <h2> представляє заголовок другого рівня. Зазвичай використовується для позначення підрозділів основного заголовка <h1>.

Приклад

<h1>Про компанію</h1>
    <h2>Наша історія</h2>
    <h2>Наша місія</h2>

CSS за замовчуванням

h2 {
      display: block;
      font-size: 1.5em;
      margin: 0.75em 0;
      font-weight: bold;
    }

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
текст або інлайн-елементи

Атрибути

Глобальні атрибути
Підтримує всі глобальні атрибути

Доступність (a11y)

Сприймається скрінрідерами як другий за важливістю заголовок, покращуючи навігацію.

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

Підтримується всіма браузерами.

Поширені помилки

  • Пропущена ієрархія заголовків (наприклад, <h2> без <h1> — не критично, але не рекомендовано).
  • Використання для стилізації замість семантики (❌ краще використовувати CSS).

Кращі практики

  • Дотримуйтесь логічної структури: <h1> → <h2> → <h3> тощо.
  • Один розділ — один основний заголовок другого рівня.

Зв’язки з іншими тегами

Використовується всередині <section>, <article>, <header>.

Семантичні альтернативи

Інші заголовки: <h1> – <h6>. Залежно від рівня вкладеності.

Сумісність з HTML версіями

Підтримується з перших версій HTML.

SEO вплив

Допомагає пошуковим системам зрозуміти структуру вмісту сторінки.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <h3>

Опис

Елемент <h3> задає заголовок третього рівня. Він підпорядкований заголовку <h2> і використовується для структурування підрозділів усередині розділів другого рівня.

Приклад

<h1>Документація</h1>
    <h2>HTML</h2>
    <h3>Заголовки</h3>
    <h3>Списки</h3>

CSS за замовчуванням

h3 {
      display: block;
      font-size: 1.17em;
      margin: 1em 0;
      font-weight: bold;
    }

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
текст або інлайн-елементи

Атрибути

Глобальні атрибути
Підтримує всі глобальні атрибути

Доступність (a11y)

Покращує структуру документа для скрінрідерів, що дозволяє легше орієнтуватися у вкладених розділах.

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

Підтримується всіма сучасними браузерами.

Поширені помилки

  • Пропуск логічної структури: <h3> без попереднього <h2>.
  • Використання для візуального оформлення замість логічної структури (❌ краще стилізувати інші теги CSS).

Кращі практики

  • Використовуйте лише після <h2>, щоб зберігати логічну ієрархію.
  • Не пропускайте рівні заголовків без потреби.

Зв’язки з іншими тегами

Часто вживається всередині <section>, <article>, <details>.

Семантичні альтернативи

Інші заголовки — <h1>, <h2>, <h4> тощо, залежно від рівня вкладеності.

Сумісність з HTML версіями

Підтримується з перших версій HTML.

SEO вплив

Дозволяє пошуковим системам краще зрозуміти структуру та контент сторінки.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <h4>

Опис

Елемент <h4> задає заголовок четвертого рівня, що слугує підзаголовком всередині розділів, позначених <h3>.

Приклад

<h2>Компоненти</h2>
    <h3>Віджет користувача</h3>
    <h4>Аватар користувача</h4>
    <h4>Ім’я користувача</h4>

CSS за замовчуванням

h4 {
      display: block;
      font-size: 1em;
      margin: 1.33em 0;
      font-weight: bold;
    }

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
текст, інлайн-елементи

Атрибути

Глобальні атрибути
Підтримує всі глобальні атрибути

Доступність (a11y)

Чітко визначає вкладену структуру для скрінрідерів і доступних інтерфейсів.

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

Повна підтримка всіма основними браузерами.

Поширені помилки

  • Використання <h4> без попередніх заголовків <h2> або <h3>.
  • Використання для стилізації замість логічного структурування (❌ краще використовувати CSS-класи).

Кращі практики

  • Використовуйте для підрозділів <h3>.
  • Дотримуйтеся логічної послідовності заголовків (без стрибків по рівнях).

Зв’язки з іншими тегами

Часто використовується в <section>, <article> або вкладених блоках контенту.

Семантичні альтернативи

Вище — <h3>, нижче — <h5>. Альтернатив немає, якщо важлива структура документа.

Сумісність з HTML версіями

Підтримується з перших версій HTML.

SEO вплив

Заголовки нижчих рівнів також враховуються пошуковими системами для структурування контенту.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <h5>

Опис

Тег <h5> використовується для створення заголовків п’ятого рівня, які є підрозділами заголовків <h4>.

Приклад

<h2>Керівництво користувача</h2>
    <h3>Розділ 1: Основи</h3>
    <h4>Інтерфейс</h4>
    <h5>Меню налаштувань</h5>

CSS за замовчуванням

h5 {
      display: block;
      font-size: 0.83em;
      margin: 1.67em 0;
      font-weight: bold;
    }

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
текст, інлайн-елементи

Атрибути

Глобальні атрибути
Підтримує всі глобальні атрибути

Доступність (a11y)

Допомагає користувачам із порушеннями зору орієнтуватись у структурі сторінки за допомогою скрінрідерів.

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

Повна підтримка всіма браузерами.

Поширені помилки

  • Пропуск рівнів заголовків (наприклад, <h5> після <h2>).
  • Використання <h5> для стилізації, а не структури (❌ краще стилізувати звичайні теги).

Кращі практики

  • Використовуйте лише в логічній вкладеності (після <h4>).
  • Не перескакуйте рівні заголовків без потреби.

Зв’язки з іншими тегами

Є частиною заголовкової ієрархії (від <h1> до <h6>). Зазвичай знаходиться всередині <section> або <article>.

Семантичні альтернативи

Інші заголовки: <h1>…<h6>, залежно від структури.

Сумісність з HTML версіями

Підтримується з перших версій HTML.

SEO вплив

Хоча менш важливий, ніж <h1>, все одно враховується пошуковими системами як частина структури.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <h6>

Опис

Тег <h6> — це заголовок найнижчого рівня. Він використовується для позначення найглибших підрозділів у структурі документа. Семантичне значення зберігається, навіть якщо його зовнішній вигляд схожий на звичайний текст.

Приклад

<h1>Продукт</h1>
<h2>Модулі</h2>
<h3>Користувачі</h3>
<h4>Форма реєстрації</h4>
<h5>Повідомлення про помилки</h5>
<h6>Мікротекст під інпутом</h6>

CSS за замовчуванням

h6 {
  display: block;
  font-size: 0.67em;
  margin: 2.33em 0;
  font-weight: bold;
}

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
текст, інлайн-елементи

Атрибути

Глобальні атрибути
Підтримує всі глобальні атрибути

Доступність (a11y)

Допомагає людям з порушенням зору розуміти ієрархію сторінки за допомогою скрінрідерів.

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

Підтримується всіма браузерами, без винятків.

Поширені помилки

  • Використання <h6> без попередніх заголовків (логічна послідовність порушена).
  • Застосування лише задля зменшеного розміру тексту — ❌ використовуйте CSS для цього.

Кращі практики

  • Використовуйте <h6> лише у вкладених структурованих підрозділах.
  • Для візуального оформлення краще використовувати стилі, а не низькорівневий заголовок.

Зв’язки з іншими тегами

Є частиною ієрархії заголовків <h1> → <h6>.

Семантичні альтернативи

Інші заголовкові теги: <h1>–<h5>.

Сумісність з HTML версіями

Підтримується у всіх версіях HTML.

SEO вплив

Має незначний вплив на SEO, але допомагає у структуризації вмісту для пошукових систем.

Додаткові посилання

Позначка

— (без позначки)

Тепер логічно перейти до контентних тегів, які часто використовуються всередині цих секцій.

HTML тег: <p>

Опис

Елемент <p> використовується для створення абзацу тексту. Це один із найосновніших і найпоширеніших елементів HTML.

Приклад

<p>Це звичайний абзац тексту.</p>
<p>Це ще один абзац з окремим блоком.</p>

CSS за замовчуванням

p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
}

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
текст, інлайн-елементи

Атрибути

Глобальні атрибути
Так (id, class, style, lang, title тощо)

Доступність (a11y)

Абзаци є логічними блоками тексту та полегшують сприйняття для користувачів, які використовують скрінрідери.

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

Підтримується всіма браузерами без винятку.

Поширені помилки

  • Вкладення блочних елементів у <p> — ❌ заборонено.
  • Забути закрити тег <p> — HTML5 пробачає, але не рекомендується.

Кращі практики

  • Використовуйте <p> лише для абзаців, а не для оформлення.
  • Для додаткового форматування — застосовуйте CSS.

Зв’язки з іншими тегами

Всередині <p> дозволені лише інлайн-елементи (наприклад, <span>, <a>, <strong> тощо).

Семантичні альтернативи

Немає прямого семантичного аналога, хоча <div> або <span> можуть бути використані зі стилізацією — ❌ не рекомендується.

Сумісність з HTML версіями

Підтримується в усіх версіях HTML з моменту створення мови.

SEO вплив

Нейтральний, але важливий для читабельності тексту. Абзаци структурують контент для пошукових систем.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <br>

Опис

Тег <br> (line break) вставляє **перенос рядка** всередині тексту. Не створює нового абзацу, а лише змушує текст продовжуватися з нового рядка. Це **порожній елемент**, який не має закриваючого тегу.

Приклад

<p>Привіт!<br>Як справи?</p>

CSS за замовчуванням

br {
      display: inline;
    }

Основні характеристики

Тип
інлайн
Семантичний
ні
Вміст
немає (порожній елемент)

Атрибути

Глобальні атрибути
Так
Спеціальні атрибути
немає

Доступність (a11y)

Може бути нечітким для скрінрідерів. Використовуйте з обережністю, особливо в довгих текстах. Для змістового розділення краще застосовувати <p>.

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

Повністю підтримується у всіх браузерах.

Поширені помилки

  • Надмірне використання замість <p> або CSS — ❌ погано для семантики.
  • Спроба вставити вміст усередину <br> — ❌ недійсно.

Кращі практики

  • Використовуйте для одиночних переносів, наприклад, у поезії або контактних даних.
  • Для абзаців — краще <p>.

Зв’язки з іншими тегами

Використовується всередині <p>, <td>, <div> та інших контейнерів тексту.

Семантичні альтернативи

<p> або CSS (наприклад, display: block;, margin) для змістовного відступу.

Сумісність з HTML версіями

Підтримується з ранніх версій HTML. У HTML5 — дозволено як самозакривний тег <br> або <br />.

SEO вплив

Має нульовий семантичний вплив, тому не впливає на SEO.

Додаткові посилання

Позначка

спеціальний — порожній інлайн-елемент для переносів рядка

HTML тег: <hr>

Опис

Тег <hr> вставляє горизонтальну лінію, яка часто використовується для тематичного розділення контенту. Це порожній інлайн-блочний елемент.

Приклад

<p>Розділ 1 текст...</p>
    <hr>
    <p>Розділ 2 текст...</p>

CSS за замовчуванням

hr {
      display: block;
      margin: 1em 0;
      border: none;
      border-top: 1px solid #ccc;
    }

Основні характеристики

Тип
блочний, порожній
Семантичний
так — означає тематичний розрив
Вміст
немає (порожній елемент)

Атрибути

Глобальні атрибути
Підтримуються
Спеціальні атрибути
немає

Доступність (a11y)

Вказує на логічний розрив у контенті для користувачів допоміжних технологій, таких як скрінрідери.

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

Підтримується всіма браузерами.

Поширені помилки

  • Використання <hr> лише як декоративної лінії без семантичного навантаження — ❌ краще стилізувати CSS.
  • Не вставляти всередину інтерактивних або інлайн елементів.

Кращі практики

  • Використовуйте для логічних розділів контенту.
  • Стилізуйте через CSS замість додавання атрибутів, які зараз не підтримуються.

Зв’язки з іншими тегами

Зазвичай використовується між <p>, <section>, <article> та іншими блоками.

Семантичні альтернативи

Для декоративних ліній без семантики можна використати CSS (наприклад, border або background на контейнері).

Сумісність з HTML версіями

Підтримується з HTML4 і пізніших версій.

SEO вплив

Впливає на структуру сторінки, допомагаючи пошуковим системам розуміти розділи.

Додаткові посилання

Позначка

семантичний — розділювач контенту, порожній блочний елемент

HTML тег: <pre>

Опис

Елемент <pre> використовується для відображення попередньо відформатованого тексту, де зберігаються пробіли, відступи і перенос рядків так, як вони вказані у вихідному коді.

Приклад

<pre>
      function greet() {
        console.log("Привіт, світ!");
      }
    </pre>

CSS за замовчуванням

pre {
      display: block;
      font-family: monospace, monospace;
      white-space: pre;
      margin: 1em 0;
      overflow: auto;
    }

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
текст, інлайн-елементи

Атрибути

Глобальні атрибути
Так

Доступність (a11y)

Корисний для демонстрації коду або форматованих текстів, допомагає користувачам зрозуміти структуру вихідного матеріалу.

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

Підтримується всіма сучасними браузерами.

Поширені помилки

  • Використання для простих абзаців замість <p> — ❌ не рекомендується.
  • Неврахування особливостей збереження пробілів і переносів рядків.

Кращі практики

  • Використовуйте для коду, виводів термінала або іншого тексту з фіксованим форматуванням.
  • За потреби додавайте прокрутку через CSS (наприклад, overflow: auto;).

Зв’язки з іншими тегами

Часто використовується разом з тегом <code> для позначення фрагментів коду.

Семантичні альтернативи

Для форматованого коду можна використовувати <code>, <samp> або <var> залежно від контексту.

Сумісність з HTML версіями

Підтримується з ранніх версій HTML.

SEO вплив

Має незначний вплив, служить переважно для покращення читабельності коду.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <blockquote>

Опис

Тег <blockquote> використовується для виділення великої цитати або блоку тексту, який запозичено з іншого джерела. Відображається як відступлений блок.

Приклад

<blockquote>
      <p>Це цитата з іншого джерела.</p>
    </blockquote>

CSS за замовчуванням

blockquote {
      display: block;
      margin: 1em 40px;
      padding-left: 1em;
      border-left: 4px solid #ccc;
      color: #666;
    }

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
блочний вміст

Атрибути

Глобальні атрибути
Так
Спеціальні атрибути
cite — посилання на джерело цитати

Доступність (a11y)

Допомагає користувачам зрозуміти, що це цитата, особливо для тих, хто використовує допоміжні технології.

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

Підтримується всіма сучасними браузерами.

Поширені помилки

  • Використання для коротких цитат — краще для них тег <q>.
  • Відсутність атрибута cite, коли посилання на джерело доступне.

Кращі практики

  • Використовуйте для великих цитат або блоків тексту.
  • Додавайте атрибут cite з посиланням на джерело, якщо можливо.

Зв’язки з іншими тегами

Інлайн-альтернатива — тег <q> для коротких цитат.

Семантичні альтернативи

Інлайн-цитати — <q>. Для стилізації без семантики — CSS-класи.

Сумісність з HTML версіями

Підтримується з HTML4 і пізніших версій.

SEO вплив

Додає структурованість контенту, допомагає пошуковикам розпізнавати цитати.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <q>

Опис

Тег <q> використовується для коротких інлайн-цитат. За замовчуванням браузери зазвичай додають лапки навколо тексту всередині цього тегу.

Приклад

<p>Вона сказала: <q>Привіт!</q></p>

CSS за замовчуванням

q {
      quotes: "«" "»" "„" "“";
    }
    q::before {
      content: open-quote;
    }
    q::after {
      content: close-quote;
    }

Основні характеристики

Тип
інлайн
Семантичний
так
Вміст
текст, інлайн-елементи

Атрибути

Глобальні атрибути
Так
Спеціальні атрибути
cite — посилання на джерело цитати

Доступність (a11y)

Допомагає екранним читачам розпізнавати цитати.

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

Підтримується всіма сучасними браузерами.

Поширені помилки

  • Використання для великих блоків цитат — краще тег <blockquote>.
  • Ігнорування атрибута cite, коли можливо.

Кращі практики

  • Використовуйте для коротких інлайн-цитат.
  • Додавайте атрибут cite для посилання на джерело, якщо є.

Зв’язки з іншими тегами

Для великих цитат — тег <blockquote>.

Семантичні альтернативи

Інші інлайн-теги для виділення тексту — <em>, <strong>.

Сумісність з HTML версіями

Підтримується з HTML4 і пізніших версій.

SEO вплив

Допомагає пошуковикам розпізнавати цитати, покращує семантику контенту.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <span>

Опис

Тег <span> — це інлайн-контейнер без жодного власного семантичного значення. Використовується для групування частин тексту чи інших інлайн-елементів для застосування стилів або скриптів.

Приклад

<p>Це <span style="color: red;">важливий</span> текст.</p>

CSS за замовчуванням

span {
      display: inline;
    }

Основні характеристики

Тип
інлайн
Семантичний
ні
Вміст
текст, інлайн-елементи

Атрибути

Глобальні атрибути
Підтримуються

Доступність (a11y)

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

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

Підтримується всіма браузерами.

Поширені помилки

  • Використання тегу для створення блочних елементів — ❌ неправильне використання.
  • Використання без потреби семантики або структуризації — краще застосовувати семантичні теги.

Кращі практики

  • Використовуйте для стилізації або групування без зміни семантики.
  • Для блочних контейнерів застосовуйте теги як <div>.

Зв’язки з іншими тегами

Може містити будь-які інлайн-елементи.

Семантичні альтернативи

Якщо потрібна семантика, використовуйте відповідні теги, наприклад, <em>, <strong>, <mark>.

Сумісність з HTML версіями

Підтримується з ранніх версій HTML.

SEO вплив

Не має впливу на SEO.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <div>

Опис

Тег <div> є блочним контейнером без семантичного значення, призначеним для групування інших елементів для стилізації або структуризації сторінки.

Приклад

<div class="container">
      <p>Текст всередині div.</p>
    </div>

CSS за замовчуванням

div {
      display: block;
    }

Основні характеристики

Тип
блочний
Семантичний
ні
Вміст
будь-які елементи (блочні, інлайн)

Атрибути

Глобальні атрибути
Підтримуються

Доступність (a11y)

Без семантики, не впливає на доступність напряму, тому для структуризації контенту рекомендується використовувати семантичні теги.

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

Підтримується всіма браузерами.

Поширені помилки

  • Зловживання <div> замість семантичних тегів (напр., <section>, <article>).
  • Використання <div> для інлайн-вмісту.

Кращі практики

  • Використовуйте <div> для стилізації або логічного групування, коли немає підходящого семантичного тегу.
  • Для структурування контенту віддавайте перевагу семантичним тегам.

Зв’язки з іншими тегами

Може містити будь-які елементи, в тому числі інлайн та блочні.

Семантичні альтернативи

Для структурування краще використовувати <section>, <article>, <nav>, <aside>, <header> тощо.

Сумісність з HTML версіями

Підтримується з початкових версій HTML.

SEO вплив

Не має безпосереднього впливу, оскільки не має семантики.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <figure>

Опис

Тег <figure> використовується для групування ілюстрацій, діаграм, фотографій, кодів чи інших графічних матеріалів з підписом.

Приклад

<figure>
      <img src="image.jpg" alt="Опис зображення">
      <figcaption>Підпис до зображення</figcaption>
    </figure>

CSS за замовчуванням

figure {
      display: block;
      margin: 1em 40px;
    }
    figcaption {
      display: block;
      text-align: center;
      font-size: 0.9em;
      color: #555;
    }

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
будь-які елементи, зазвичай зображення, відео, код, і <figcaption> (опціонально)

Атрибути

Глобальні атрибути
Підтримуються

Доступність (a11y)

Допомагає краще структурувати вміст і підписувати ілюстрації, що покращує сприйняття контенту користувачами з обмеженими можливостями.

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

Підтримується всіма сучасними браузерами.

Поширені помилки

  • Відсутність тегу <figcaption> для пояснення змісту ілюстрації.
  • Використання для контенту, який не є ілюстративним.

Кращі практики

  • Використовуйте для семантичного групування ілюстрацій з поясненнями.
  • Обов’язково додавайте <figcaption>, якщо потрібно пояснити зображення або інший контент.

Зв’язки з іншими тегами

<figcaption> — спеціальний тег для підпису вмісту <figure>.

Семантичні альтернативи

Для зображень без підпису можна використовувати <img> без <figure>.

Сумісність з HTML версіями

Починаючи з HTML5.

SEO вплив

Покращує семантику сторінки, що допомагає пошуковим системам краще індексувати ілюстративний контент.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <figcaption>

Опис

Тег <figcaption> використовується для підпису або опису вмісту елемента <figure>.

Приклад

<figure>
      <img src="image.jpg" alt="Опис зображення">
      <figcaption>Це підпис до зображення.</figcaption>
    </figure>

CSS за замовчуванням

figcaption {
      display: block;
      text-align: center;
      font-size: 0.9em;
      color: #555;
    }

Основні характеристики

Тип
блочний
Семантичний
так
Вміст
текст, інлайн-елементи

Атрибути

Глобальні атрибути
Підтримуються

Доступність (a11y)

Покращує доступність, надаючи пояснення до ілюстративного контенту.

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

Підтримується всіма сучасними браузерами.

Поширені помилки

  • Використання поза межами <figure> — ❌ не рекомендується.

Кращі практики

  • Завжди розміщуйте <figcaption> всередині <figure>.
  • Використовуйте для пояснень ілюстрацій чи іншого медіаконтенту.

Зв’язки з іншими тегами

Завжди знаходиться всередині <figure>.

Семантичні альтернативи

Для підписів можна використовувати <caption> (для таблиць) або звичайні <p> елементи без семантики.

Сумісність з HTML версіями

Починаючи з HTML5.

SEO вплив

Допомагає краще структуризувати контент із зображеннями.

Додаткові посилання

Позначка

— (без позначки)

HTML тег: <time>

Опис

Тег <time> використовується для позначення дат, часу або тривалості в машинозчитуваному форматі, що дозволяє браузерам, пошуковим системам і помічникам краще розуміти інформацію про час.

Приклад

<p>Публікація статті: <time datetime="2025-06-29">29 червня 2025</time></p>

CSS за замовчуванням

time {
      display: inline;
    }

Основні характеристики

Тип
інлайн
Семантичний
так
Вміст
текст (дата або час у форматі людини), може мати атрибут datetime для машинозчитуваного формату

Атрибути

Глобальні атрибути
Підтримуються
datetime
Обов’язковий для машинозчитуваного формату дати або часу, наприклад: "2025-06-29", "2025-06-29T15:30"

Доступність (a11y)

Допомагає користувачам і системам правильно інтерпретувати дату і час.

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

Підтримується всіма сучасними браузерами.

Поширені помилки

  • Відсутність атрибута datetime для точного машинозчитуваного формату.
  • Використання для текстів, що не є датою або часом.

Кращі практики

  • Завжди додавайте атрибут datetime з правильним форматом ISO 8601.
  • Використовуйте для позначення дат, часу, тривалості, наприклад, у подіях або новинах.

Зв’язки з іншими тегами

Може використовуватися в будь-яких елементах, де потрібна дата або час.

Семантичні альтернативи

Немає повних альтернатив, це семантичний тег для часу.

Сумісність з HTML версіями

Починаючи з HTML5.

SEO вплив

Покращує індексацію дат та часу пошуковими системами.

Додаткові посилання

Позначка

— (без позначки)