HTML теги шпаргалка: повний довідник
HTML теги шпаргалка
Повний довідник HTML тегів з прикладами правильного та неправильного використання. Детальніше — в уроках HTML.
Структура документа
Структура HTML документа
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Назва сторінки</title>
</head>
<body>
<!-- Контент сторінки -->
</body>
</html>Детальніше — в уроці про структуру HTML.
Семантичні теги
| Тег | Призначення |
|---|---|
<header> | Верхня частина сторінки або секції |
<nav> | Блок навігації |
<main> | Основний контент (один на сторінку!) |
<section> | Логічна секція з заголовком |
<article> | Самостійний блок (стаття, пост, коментар) |
<aside> | Бічний контент (sidebar, рекомендації) |
<footer> | Нижня частина сторінки або секції |
<!-- Правильно: семантичні теги -->
<header>
<nav>...</nav>
</header>
<main>
<article>
<h2>Стаття</h2>
<p>Текст...</p>
</article>
</main>
<footer>...</footer>
<!-- Неправильно: div замість семантики -->
<div class="header">
<div class="nav">...</div>
</div>
<div class="main">
<div class="article">...</div>
</div>Детальніше — в уроці про семантичний HTML.
Текст та заголовки
| Тег | Призначення | Приклад |
|---|---|---|
<h1>...<h6> | Заголовки (h1 — найважливіший) | <h1>Головний</h1> |
<p> | Абзац тексту | <p>Текст...</p> |
<strong> | Важливий текст (жирний) | <strong>увага</strong> |
<em> | Наголос (курсив) | <em>наголошено</em> |
<mark> | Виділений текст | <mark>виділено</mark> |
<del> | Видалений текст | <del>старе</del> |
<ins> | Вставлений текст | <ins>нове</ins> |
<sub> | Нижній індекс | H<sub>2</sub>O |
<sup> | Верхній індекс | E=mc<sup>2</sup> |
<blockquote> | Блочна цитата | <blockquote>Цитата</blockquote> |
<code> | Код (inline) | <code>let x = 1</code> |
<pre> | Форматований текст (зберігає пробіли) | <pre> відступ</pre> |
<br> | Розрив рядка | Рядок 1<br>Рядок 2 |
<hr> | Горизонтальна лінія-розділювач | <hr> |
<!-- Правильно: h1 один на сторінку, ієрархія -->
<h1>Назва сайту</h1>
<h2>Розділ</h2>
<h3>Підрозділ</h3>
<!-- Неправильно: пропуск рівнів, кілька h1 -->
<h1>Заголовок 1</h1>
<h1>Заголовок 2</h1> <!-- другий h1! -->
<h4>Підрозділ</h4> <!-- пропуск h2, h3 --><!-- Правильно: strong для смислового наголосу -->
<p><strong>Увага:</strong> не видаляйте цей файл.</p>
<!-- Неправильно: b просто для жирного -->
<p><b>Увага:</b> не видаляйте цей файл.</p>Детальніше — в уроці про текстове форматування.
Списки
| Тег | Призначення |
|---|---|
<ul> | Невпорядкований список (маркери) |
<ol> | Впорядкований список (нумерація) |
<li> | Елемент списку |
<dl> | Список визначень |
<dt> | Термін |
<dd> | Визначення терміну |
<!-- Невпорядкований -->
<ul>
<li>JavaScript</li>
<li>TypeScript</li>
</ul>
<!-- Впорядкований -->
<ol>
<li>Встанови Node.js</li>
<li>Створи проєкт</li>
</ol>
<!-- Список визначень -->
<dl>
<dt>HTML</dt>
<dd>Мова розмітки для створення веб-сторінок</dd>
<dt>CSS</dt>
<dd>Мова стилів для оформлення HTML</dd>
</dl><!-- Неправильно: li поза списком -->
<li>Елемент 1</li>
<li>Елемент 2</li>
<!-- Правильно: li всередині ul або ol -->
<ul>
<li>Елемент 1</li>
<li>Елемент 2</li>
</ul>Посилання та зображення
| Тег | Атрибути | Опис |
|---|---|---|
<a> | href, target, rel | Гіперпосилання |
<img> | src, alt, width, height | Зображення |
<figure> | — | Контейнер для медіа + підпис |
<figcaption> | — | Підпис до figure |
<picture> | — | Адаптивне зображення |
<video> | src, controls, autoplay | Відео |
<audio> | src, controls | Аудіо |
<!-- Правильно: alt завжди вказаний -->
<img src="photo.jpg" alt="Робочий стіл з ноутбуком" width="800" height="600">
<!-- Неправильно: без alt -->
<img src="photo.jpg"><!-- Правильно: зовнішнє посилання з rel -->
<a href="https://google.com" target="_blank" rel="noopener noreferrer">
Google
</a>
<!-- Правильно: figure з підписом -->
<figure>
<img src="diagram.png" alt="Діаграма архітектури">
<figcaption>Рис. 1 — Архітектура додатку</figcaption>
</figure>Детальніше — в уроці про посилання та зображення.
Таблиці
| Тег | Призначення |
|---|---|
<table> | Контейнер таблиці |
<thead> | Заголовок таблиці |
<tbody> | Тіло таблиці |
<tfoot> | Підсумок таблиці |
<tr> | Рядок |
<th> | Комірка заголовка |
<td> | Комірка даних |
<caption> | Підпис таблиці |
<!-- Правильно: повна структура -->
<table>
<caption>Оцінки студентів</caption>
<thead>
<tr>
<th>Ім'я</th>
<th>Оцінка</th>
</tr>
</thead>
<tbody>
<tr>
<td>Олена</td>
<td>95</td>
</tr>
</tbody>
</table>
<!-- colspan — об'єднання колонок -->
<tr>
<th colspan="2">Ім'я та прізвище</th>
</tr>
<!-- rowspan — об'єднання рядків -->
<tr>
<td rowspan="2">Програмування</td>
<td>JavaScript</td>
</tr>
<tr>
<td>TypeScript</td>
</tr><!-- Неправильно: таблиця для розмітки сторінки -->
<table>
<tr>
<td>Меню</td>
<td>Контент</td>
<td>Сайдбар</td>
</tr>
</table>Увага
Не використовуй <table> для створення макету сторінки. Для цього є CSS Flexbox та Grid — дивись шпаргалку з CSS Flexbox та Grid.
Детальніше — в уроці про таблиці.
Форми
| Тег | Призначення |
|---|---|
<form> | Контейнер форми |
<label> | Підпис до поля введення |
<input> | Поле введення (багато типів) |
<textarea> | Багаторядкове текстове поле |
<select> + <option> | Випадаючий список |
<button> | Кнопка |
<fieldset> + <legend> | Група полів із заголовком |
<!-- Правильно: label пов'язаний з input через for/id -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<!-- Також правильно: label обгортає input (не потрібен for/id) -->
<label>
Email:
<input type="email" name="email" required>
</label>Корисні атрибути для <input>
| Атрибут | Опис | Приклад |
|---|---|---|
required | Обов'язкове поле | <input required> |
placeholder | Підказка в порожньому полі | <input placeholder="Ваш email"> |
disabled | Неактивне поле | <input disabled> |
readonly | Тільки для читання | <input readonly value="locked"> |
pattern | Регулярний вираз валідації | <input pattern="[0-9]{3}"> |
min / max | Межі для number/date | <input type="number" min="1" max="10"> |
autocomplete | Автозаповнення браузером | <input autocomplete="email"> |
Типи <input>
| Тип | Що показує | Приклад |
|---|---|---|
text | Текстове поле | <input type="text"> |
email | Email з валідацією | <input type="email"> |
password | Замасковане поле | <input type="password"> |
number | Число (кнопки ±) | <input type="number" min="1" max="100"> |
date | Вибір дати | <input type="date"> |
checkbox | Галочка (кілька) | <input type="checkbox"> |
radio | Перемикач (одне з) | <input type="radio" name="color"> |
file | Завантаження файлу | <input type="file" accept=".jpg,.png"> |
range | Повзунок | <input type="range" min="0" max="100"> |
color | Палітра кольорів | <input type="color"> |
search | Поле пошуку | <input type="search"> |
tel | Телефон | <input type="tel"> |
url | URL-адреса | <input type="url"> |
hidden | Приховане поле | <input type="hidden" value="token"> |
Детальніше — в уроці про форми.
Мета-теги (<head>)
<head>
<!-- Обов'язкові -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Назва сторінки</title>
<!-- SEO -->
<meta name="description" content="Опис сторінки для Google">
<!-- Open Graph (соцмережі) -->
<meta property="og:title" content="Назва">
<meta property="og:description" content="Опис">
<meta property="og:image" content="https://site.com/image.jpg">
<!-- Стилі та скрипти -->
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
<script src="app.js" defer></script>
</head>| Атрибут script | Опис |
|---|---|
| без атрибутів | Блокує рендеринг сторінки |
defer | Завантажує паралельно, виконує після HTML |
async | Завантажує та виконує паралельно |
<!-- Правильно: defer для зовнішніх скриптів -->
<script src="app.js" defer></script>
<!-- Неправильно: скрипт у head без defer блокує рендеринг -->
<script src="heavy-app.js"></script>Глобальні атрибути
Ці атрибути можна використовувати на будь-якому HTML-елементі:
| Атрибут | Опис | Приклад |
|---|---|---|
id | Унікальний ідентифікатор | <div id="app"> |
class | CSS-клас(и) | <p class="text-bold"> |
style | Inline-стилі | <span style="color: red"> |
data-* | Кастомні дані для JS | <button data-id="42"> |
title | Підказка при наведенні | <abbr title="HTML">HTML</abbr> |
hidden | Приховує елемент | <div hidden> |
tabindex | Порядок Tab-навігації | <div tabindex="0"> |
lang | Мова контенту | <p lang="en">Hello</p> |
aria-label | Підпис для скрінрідерів | <button aria-label="Закрити">X</button> |
HTML5 інтерактивні елементи
<!-- Розгортаний блок (без JS!) -->
<details>
<summary>Показати відповідь</summary>
<p>Ось відповідь на питання.</p>
</details>
<!-- Прогрес-бар -->
<progress value="70" max="100">70%</progress>
<!-- Машинозчитувана дата -->
<time datetime="2026-02-15">15 лютого 2026</time>Інфо
- MDN HTML Reference — повний довідник усіх HTML елементів
- HTML Validator — перевірка коректності HTML
- Can I Use — підтримка HTML/CSS фіч у браузерах
- HTML Best Practices — правила написання якісного HTML