HTML5 теги - повний гід розробника
Blog
Уявіть будинок без фундаменту: стіни можуть виглядати красиво, але при першому ж навантаженні все посипеться. З веб-сайтами — та сама історія. HTML5 — це і є той фундамент, на якому тримається кожна сторінка в інтернеті, незалежно від того, наскільки сучасний фреймворк ви використовуєте поверх нього.
Багато розробників-початківців поспішають одразу до JavaScript або CSS, вважаючи HTML «занадто простим, щоб витрачати на нього час». Це серйозна помилка. Саме HTML-теги визначають, як пошуковий робот Google інтерпретує ваш контент, як скрінрідер озвучує сторінку незрячому користувачу, і як браузер розуміє, що є заголовком, а що — навігацією. Погано написаний HTML — це не лише некрасивий код, це прямі втрати в SEO-рейтингу та доступності.
У цьому матеріалі — повний і структурований довідник з ключових HTML5-елементів, розбитий за категоріями. Кожен тег пояснений не просто як «він існує», а з розумінням того, навіщо він потрібен і як правильно його використовувати. Збережіть цю сторінку — вона стане вам у пригоді і через рік.
Основна структура
Basic Structure · Каркас кожної сторінки
<!DOCTYPE html>Оголошення типу документа. Завжди першим рядком — повідомляє браузеру, що перед ним HTML5, а не старіші версії стандарту.
<html>Кореневий елемент сторінки. Всередину входить абсолютно весь вміст документа. Атрибут lang="uk" покращує SEO та доступність.
<head>Контейнер для метаданих: title, charset, viewport, Open Graph-теги. Невидимий користувачу, але критичний для пошукових систем.
<title>Заголовок сторінки у вкладці браузера та у видачі Google. Один із найвагоміших SEO-факторів on-page оптимізації.
<body>Весь видимий вміст сайту — тексти, зображення, кнопки, форми. Усе, що бачить відвідувач, живе тут.
Посилання та медіа
Links & Media · Що робить інтернет «павутиною»
<a>Гіперпосилання для переходів. Атрибут href задає адресу, rel="noopener" — безпеку, а наявний якірний текст — SEO-сигнал для роботів.
<img>Вбудовування зображень. Атрибут alt — обов'язковий: він читається скрінрідерами і індексується Google Images.
<video>Нативний мультимедійний контент без Flash і сторонніх плагінів. Підтримка в усіх сучасних браузерах; атрибут controls додає вбудований плеєр.
<iframe>Вставлення стороннього контенту: карти Google, відео з YouTube, форми Typeform. Використовуйте з атрибутом loading="lazy" для оптимізації швидкості.
Текст та списки
Text & Lists · Структура контенту
<h1> - <h6>Ієрархія заголовків. h1 — один на сторінку, це головний заголовок для SEO. h2–h6 структурують підрозділи та підказують пошуковику тематику контенту.
<p>Звичайні абзаци — основна одиниця текстового контенту. Не варто гнати весь текст в один тег; поділ на абзаци покращує читабельність і поведінкові метрики.
<ul>, <ol>Марковані та нумеровані списки. Google добре сприймає списки у featured snippets — структурований контент частіше потрапляє в нульову позицію видачі.
<li>Окремий пункт списку. Завжди вкладається в <ul> або <ol>, не може існувати самостійно.
<strong>, <em>strong — важливий (жирний) текст із семантичним значенням. em — акцентований (курсив). Обидва теги несуть сенс для пошукового робота на відміну від чисто стилістичних b та i.
Таблиці та форми
Tables & Forms · Дані та взаємодія
<table>Табличні дані — де рядки (tr) і клітинки (td) утворюють сітку. Важливо: таблиця для даних, а не для верстки — це архаїзм 90-х.
<form>Оболонка для збору даних від користувача. Атрибути action та method визначають куди і як відправляється інформація.
<input>Поле введення — найвживаніший елемент форм. Тип задається атрибутом: text, email, password, checkbox, tel тощо. Правильний тип покращує UX на мобільних.
<button>Кнопка для відправки форми або виклику JS-дій. Семантично краща, ніж <div> чи <span> зі стилем кнопки — доступна з клавіатури за замовчуванням.
Семантика — скарб для SEO
Semantic Tags · Структура, яку розуміє Google
<header>«Шапка» сайту або розділу — зазвичай містить логотип, назву та навігацію. Google орієнтується на нього при визначенні бренду та основної теми ресурсу.
<nav>Навігаційне меню. Сигналізує пошуковику про архітектуру сайту та перелінковку. Кілька nav на сторінці — нормально, якщо кожен має свій призначення.
<main>Головний, унікальний контент сторінки — один на документ. Google надає йому найбільшу вагу при індексуванні, решта — обгортка.
<article>Самостійний блок контенту: пост у блозі, новина, товарна картка. Ключова ознака — може бути виокремлений та має сенс поза контекстом сторінки.
<aside>Бічна панель або додатковий контент, пов'язаний з основним, але не обов'язковий для розуміння. Пошуковик надає цьому блоку меншу SEO-вагу.
<footer>«Підвал» сторінки — копірайт, контакти, додаткові посилання. Важливий для крауфорду посилань та юридичної інформації, яку Google теж враховує.
Чому семантика = SEO-перевага
Пошуковий робот Google «читає» HTML так само, як браузер. Коли замість беззмістовного <div> ви використовуєте <article> або <nav> — Google розуміє, що є головним контентом, де навігація, а що — другорядна інформація. Це прямо впливає на ранжування та появу розширених сніпетів у пошуковій видачі.
З точки зору SEO, семантична розмітка — це один із найдешевших способів покращити позиції сайту без додаткового бюджету. Правильно розставлені теги <h1> – <h2> формують чітку ієрархію ключових слів на сторінці, а <main> разом з <article> підказують Googlebot, який саме блок тексту є основним контентом для індексування — а не меню, реклама чи підвал. Окремо варто згадати структуровані дані: семантичний HTML є базою, на якій будується Schema.org - розмітка, що дозволяє отримати розширені сніпети з рейтингами, датами, хлібними крихтами прямо у видачі Google. Без чистої семантичної основи реалізувати це коректно — значно складніше.
HTML — це не нудно, це потужно
HTML5 існує вже понад десятиліття, але більшість сайтів досі використовують лише третину його можливостей. Розробники верстають <div>-ами там, де мав би стояти <article>, ігнорують <main> і забувають про <nav> — і потім дивуються, чому сайт не росте в пошуковій видачі.
Семантична розмітка — це не про перфекціонізм і не про слідування правилам заради правил. Це про те, щоб ваш сайт розуміли всі: і реальні люди, і алгоритми Google, і асистивні технології. Витратити 20 хвилин на правильну структуру HTML на старті проєкту — значить заощадити години рефакторингу пізніше і дати сайту чесний старт у пошуку.
Почніть з малого: відкрийте будь-який свій проєкт і перевірте — чи є там хоч один <main>, <article> або <nav>? Якщо ні — тепер ви знаєте, що виправити в першу чергу.