Теги HTML5: справочник с примерами

Теги HTML — это не список, который нужно вызубрить, а инструмент разметки смысла. Браузер, поисковый робот и скринридер читают одну и ту же страницу по-разному, и единственное, на что они все опираются, — выбранные вами теги. Ниже разобраны все актуальные теги HTML5: что каждый из них значит, когда он уместен, какой тег пришёл на смену устаревшему и какие ошибки чаще всего встречаются в вёрстке.

Как устроен HTML-документ

Любая страница — это дерево. У дерева один корень <html> и две ветви: <head> со служебными данными и <body> с тем, что видит посетитель. Всё остальное вкладывается в эти две ветви, и именно вложенность определяет, как браузер построит DOM, а CSS — к чему применит стили.

Минимальный корректный документ HTML5 выглядит так:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Заголовок страницы</title>
</head>
<body>
    <h1>Привет</h1>
</body>
</html>

Четыре строки в этом примере обязательны к пониманию. <!DOCTYPE html> переключает браузер в стандартный режим — без него включается режим совместимости с документами двадцатилетней давности, и расчёт размеров блоков меняется. Атрибут lang подсказывает поисковику и синтезатору речи язык текста. <meta charset="UTF-8"> обязан идти в первых 1024 байтах документа, иначе кириллица превратится в вопросительные знаки. <meta name="viewport"> отвечает за то, что на телефоне страница не будет показана в масштабе «вся десктопная ширина мелким шрифтом».

Блочные и строчные элементы

Исторически теги делили на блочные (div, p, section) и строчные (span, a, strong). В спецификации HTML5 это деление заменено категориями контента, но на практике различие осталось: блочный элемент занимает всю доступную ширину и начинается с новой строки, строчный течёт внутри текста. Важно помнить правило вложенности: строчный элемент не может содержать блочный. Единственное исключение — <a>, которому в HTML5 разрешили оборачивать целые блоки, чем мы и пользуемся, когда вся карточка товара должна быть ссылкой.

Семантическая структура страницы

До HTML5 типичная страница состояла из вложенных друг в друга <div> с классами header, menu, content, sidebar. Машина не знала, что эти классы значат, — для неё всё это были одинаковые безымянные коробки. Семантические теги дали каждой части страницы собственное имя.

Разница между <article> и <section> сбивает с толку чаще прочего. Проверка простая: если фрагмент можно вырезать со страницы и опубликовать отдельно, и он не потеряет смысл — это <article>. Если это просто смысловая часть чего-то большего — <section>. Пост в блоге — article. Раздел «Характеристики» внутри описания товара — section.

Типичная страница блога размечается так:

<body>
  <header>
    <a href="/">Логотип</a>
    <nav><a href="/blog/">Блог</a> <a href="/contacts/">Контакты</a></nav>
  </header>

  <main>
    <article>
      <h1>Заголовок статьи</h1>
      <p>Текст статьи…</p>
      <section>
        <h2>Раздел статьи</h2>
        <p>…</p>
      </section>
      <footer>Автор, дата публикации</footer>
    </article>
  </main>

  <aside>Похожие записи</aside>

  <footer>© 2026</footer>
</body>

Выигрыш от такой разметки не абстрактный. Скринридер позволяет незрячему посетителю перепрыгнуть сразу к main, минуя меню. Браузерный режим чтения опознаёт article и показывает только текст. Поисковый робот точнее понимает, где основное содержимое, а где обвязка, повторяющаяся на всех страницах.

Текст: заголовки, абзацы и выделения

Текстовые теги — те, которыми пользуются ежедневно, и именно в них чаще всего путают внешний вид со смыслом.

Разница между <strong> и <b> — ровно в смысле, а не в начертании. «Внимание: сервер перезагрузится» — это strong, потому что фраза важна. Название товара в описании, выделенное жирным по типографской традиции, — это b. То же с парой <em> и <i>: первый меняет смысл фразы, второй просто наклоняет шрифт.

Про заголовки есть отдельное правило, которое нарушают постоянно: уровни образуют оглавление документа, а не набор размеров шрифта. Если после h2 идёт h4, в структуре документа появляется дыра. Нужен шрифт помельче — это задача CSS, а не повод взять тег уровнем ниже.

Списки

Списков в HTML три, и каждый решает свою задачу.

<ul>                        <!-- маркированный, порядок не важен -->
  <li>Первый пункт</li>
  <li>Второй пункт</li>
</ul>

<ol start="3" reversed>      <!-- нумерованный, порядок важен -->
  <li>Третий по счёту</li>
</ol>

<dl>                         <!-- список определений -->
  <dt>HTML</dt>
  <dd>Язык разметки документов</dd>
  <dt>CSS</dt>
  <dd>Язык описания внешнего вида</dd>
</dl>

У <ol> есть полезные атрибуты, о которых забывают: start задаёт начало нумерации, reversed разворачивает её, type меняет вид маркера на буквы или римские цифры. Список определений <dl> отлично подходит для словарей терминов, характеристик товара и блоков «вопрос — ответ»: пары «термин — описание» машина читает как связанные, в отличие от двух соседних абзацев.

Меню сайта — это тоже список. Набор ссылок, просто расставленных через пробел, скринридер прочитает как сплошной текст, а список объявит: «навигация, 5 пунктов».

Ссылки и навигация

Тег <a> — главный тег гипертекста, и у него несколько атрибутов, которые стоит знать наизусть.

<a href="/blog/">Внутренняя ссылка</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Внешняя</a>
<a href="#section-2">Якорь на этой же странице</a>
<a href="mailto:[email protected]">Письмо</a>
<a href="tel:+380675024584">Позвонить</a>
<a href="/price.pdf" download>Скачать прайс</a>

Связка target="_blank" без rel="noopener" — старая дыра в безопасности: открытая страница получает доступ к объекту window.opener и может подменить исходную вкладку. Современные браузеры добавляют noopener сами, но полагаться на это в чужой среде не стоит.

Атрибут rel отвечает и за SEO: rel="nofollow" говорит поисковику не передавать вес по ссылке, rel="sponsored" помечает рекламную, rel="ugc" — ссылку из пользовательского контента. Текст ссылки при этом должен быть осмысленным: «подробнее» и «здесь» одинаково бесполезны и для поисковика, и для человека, который слушает страницу через скринридер и получает список ссылок без окружающего текста.

Изображения, видео и аудио

Картинка в HTML — это не только <img>. Вокруг неё выстроено целое семейство тегов, которое решает две задачи: подписать изображение и отдать браузеру подходящий по весу файл.

<figure>
  <img src="/img/scheme.webp"
       alt="Схема структуры HTML-документа"
       width="1200" height="630"
       loading="lazy" decoding="async">
  <figcaption>Дерево документа: один корень и две ветви</figcaption>
</figure>

Атрибут alt обязателен всегда. Он описывает содержимое картинки для тех, кто её не видит, и показывается вместо изображения, если файл не загрузился. Для чисто декоративной картинки пишут пустой alt="" — тогда скринридер её пропустит, а вот отсутствие атрибута заставит его зачитать имя файла. Атрибуты width и height нужны не для размеров, а чтобы браузер заранее зарезервировал место: без них страница дёргается при загрузке, и это прямо ухудшает показатель Cumulative Layout Shift в Core Web Vitals. loading="lazy" откладывает загрузку картинок за пределами экрана.

Когда нужно отдать разные файлы разным экранам, подключают <picture>:

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="Описание">
</picture>

Браузер берёт первый формат, который понимает, и останавливается. Старый браузер дойдёт до <img> и получит JPEG. Тот же приём с атрибутом media позволяет показать на телефоне вертикальный кадр, а на десктопе — горизонтальный.

Автовоспроизведение видео работает только в связке autoplay muted playsinline — без muted мобильный браузер его заблокирует. У <iframe> всегда стоит указывать title: скринридер объявляет им содержимое фрейма, иначе посетитель услышит безымянную «встроенную область».

Таблицы

Таблицы вернулись в обиход после того, как их перестали использовать для вёрстки. Для настоящих табличных данных альтернативы им нет, но размечать их нужно полностью.

<table>
  <caption>Тарифы на хостинг</caption>
  <thead>
    <tr><th scope="col">Тариф</th><th scope="col">Диск</th><th scope="col">Цена</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Старт</th><td>10 ГБ</td><td>3 $</td></tr>
    <tr><th scope="row">Бизнес</th><td>50 ГБ</td><td>9 $</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">Цены указаны без НДС</td></tr>
  </tfoot>
</table>

Три вещи отличают размеченную таблицу от набора ячеек. <caption> даёт ей название, которое зачитывается первым. <th> с атрибутом scope объявляет, что ячейка — заголовок столбца или строки, и скринридер при переходе по ячейкам подсказывает: «Бизнес, Цена, 9 долларов». Разделение на <thead>, <tbody> и <tfoot> позволяет браузеру повторять шапку при печати длинной таблицы и прокручивать тело отдельно от заголовков.

На узком экране широкая таблица — всегда проблема. Рабочих решения два: обернуть её в контейнер с overflow-x: auto и дать прокрутку, либо перестроить строки в карточки через CSS, подставляя заголовки столбцов из data-label. Оба способа оставляют разметку корректной — ломает таблицу именно попытка упихнуть её в ширину экрана уменьшением шрифта.

Формы и поля ввода

Формы — самая большая группа тегов и единственное место, где HTML умеет не только показывать, но и собирать данные.

<form action="/send/" method="post">
  <fieldset>
    <legend>Заявка</legend>

    <label for="name">Имя</label>
    <input type="text" id="name" name="name" required autocomplete="name">

    <label for="mail">Почта</label>
    <input type="email" id="mail" name="email" required
           placeholder="[email protected]" autocomplete="email">

    <label for="plan">Тариф</label>
    <select id="plan" name="plan">
      <optgroup label="Хостинг">
        <option value="start">Старт</option>
        <option value="pro" selected>Бизнес</option>
      </optgroup>
    </select>

    <label for="msg">Сообщение</label>
    <textarea id="msg" name="message" rows="5"></textarea>

    <button type="submit">Отправить</button>
  </fieldset>
</form>

Связка <label for> с id поля — не формальность. Она увеличивает область нажатия (клик по подписи ставит курсор в поле), а скринридер благодаря ей знает, что именно спрашивают. Поле без подписи, у которого роль подписи играет placeholder, — распространённая ошибка: подсказка исчезает при первом же символе, и посетитель перестаёт понимать, что вводит.

Тип поля определяет и клавиатуру на телефоне, и встроенную проверку:

Валидация средствами HTML работает без единой строки JavaScript: required запрещает отправку пустого поля, minlength и maxlength ограничивают длину, pattern задаёт регулярное выражение, min и max — границы числа и даты. Это первая линия, а не защита: проверку на сервере она не отменяет, потому что любой запрос можно отправить в обход формы.

Ещё два тега этой группы заслуживают внимания. <datalist> даёт полю автоподсказки, оставляя возможность ввести своё значение. <output> показывает результат вычисления — например, сумму заказа, пересчитанную при изменении количества.

Интерактивные элементы без JavaScript

Часть поведения, ради которого раньше подключали скрипты, в HTML5 встроена.

<details>
  <summary>Что входит в обслуживание сайта?</summary>
  <p>Обновления, резервные копии, мониторинг доступности.</p>
</details>

<dialog id="modal">
  <p>Заявка отправлена</p>
  <button onclick="modal.close()">Закрыть</button>
</dialog>

<progress value="70" max="100">70%</progress>
<meter value="0.8" low="0.3" high="0.9">80%</meter>

<details> с <summary> — готовый аккордеон: раскрывается по клику, работает с клавиатуры, индексируется поисковиком. Блок «вопрос — ответ» на этом теге не требует ни строчки JavaScript. <dialog> — модальное окно с правильным поведением фокуса: метод showModal() запирает фокус внутри окна и закрывает его по Escape. <progress> показывает ход процесса, <meter> — значение в известном диапазоне, например заполненность диска.

Служебные теги в <head>

Эти теги посетитель не видит, но именно они решают, как страница выглядит в выдаче и в соцсетях.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Теги HTML5: справочник</title>
  <meta name="description" content="Все актуальные теги HTML5 с примерами">
  <link rel="canonical" href="https://example.com/html5/">
  <link rel="alternate" hreflang="uk" href="https://example.com/uk/html5/">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/style.css">
  <meta property="og:title" content="Теги HTML5: справочник">
  <meta property="og:image" content="https://example.com/img/cover.webp">
  <script src="/app.js" defer></script>
</head>

<title> — самый весомый текстовый сигнал для поисковика и то, что посетитель видит во вкладке. <link rel="canonical"> указывает главный адрес страницы, когда до неё ведут несколько URL с параметрами. hreflang связывает языковые версии между собой — для многоязычного сайта это обязательная разметка, без неё поисковик показывает не ту версию. Открытые графы og: определяют, как ссылка выглядит в мессенджере и соцсети.

Про подключение скриптов стоит помнить одно: <script> без атрибутов останавливает разбор документа, пока файл не загрузится и не выполнится. Атрибут defer откладывает выполнение до конца разбора и сохраняет порядок файлов, async выполняет сразу по загрузке и порядок не гарантирует. Для счётчиков подходит async, для кода приложения — defer.

Устаревшие теги и чем их заменить

Эти теги браузеры всё ещё отображают, но спецификация их исключила: часть отвечала за оформление, которое давно ушло в CSS, часть просто вредила.

Отдельная история — <hgroup>. Его исключили из спецификации, потом вернули с другим смыслом, и сегодня для связки «заголовок плюс подзаголовок» достаточно обычного <p> рядом с заголовком.

Частые ошибки разметки

• Несколько <h1> на странице. Заголовок первого уровня описывает страницу целиком, и он один. Остальное — уровни ниже.
• Блок внутри абзаца. <div> внутри <p> браузер молча исправляет, закрывая абзац раньше, — и вёрстка едет без видимой причины.
• <br> вместо отступов. Три подряд переноса строки — это попытка сделать стилями то, что стилями и делается: margin.
• Картинка без alt. Теряются и доступность, и поисковый трафик с картинок.
• Кнопка, сделанная из <div>. Такой «кнопке» нужны обработчик клавиатуры, role и tabindex, тогда как <button> умеет это сразу.
• Ссылка без href. Элемент выпадает из навигации с клавиатуры. Нет адреса — используйте <button>.
• Таблица для вёрстки. На мобильном такая разметка не перестраивается, а скринридер зачитывает её как таблицу данных.
• <div> вместо семантики. Страница из одних только div работает, но лишается всего, что даёт разметка смысла: быстрой навигации, режима чтения, понятной структуры для поисковика.

Как проверить разметку

Три инструмента покрывают почти все ошибки. Валидатор W3C находит незакрытые теги, неверную вложенность и несуществующие атрибуты. Вкладка Accessibility в инструментах разработчика браузера показывает дерево доступности — то, что «видит» скринридер. Lighthouse в Chrome проверяет семантику вместе со скоростью и выдаёт список конкретных замечаний.

Отдельный приём для самопроверки: откройте страницу с отключённым CSS. Если без стилей документ читается сверху вниз как осмысленный текст с заголовками, списками и подписями к картинкам — разметка сделана правильно. Если превращается в кашу, дело не в стилях, а в тегах.

Коротко о главном

Если держать в голове всего несколько правил, остальное выводится из них само:

• Тег выбирают по смыслу, а не по виду. Внешний вид любого элемента меняется одной строкой CSS, а смысл, заложенный тегом, читают машины — и изменить его стилями нельзя.
• Структура страницы — это header, nav, main, article, section, aside, footer. <div> остаётся для случаев, когда ни один из них не подходит, а не наоборот.
• Заголовки образуют оглавление документа. Один h1, дальше по порядку, без пропусков уровней.
• Три атрибута, которые забывают чаще всего: alt у картинки, for у подписи поля и title у фрейма. Каждый из них — пара минут работы и заметная разница в доступности.
• Форма умеет проверять себя сама. Правильный type плюс required и pattern закрывают большую часть валидации без JavaScript — но не отменяют проверку на сервере.
• Всё, что про оформление, живёт в CSS. Именно поэтому из спецификации ушли font, center и их соседи.

Хорошая разметка почти не видна: сайт просто работает — быстро открывается, нормально читается на телефоне, правильно выглядит в поисковой выдаче и в мессенджере, доступен людям со скринридером. Плохую замечают сразу, но лечат обычно не там, где болит: правят стили, подключают скрипты, ставят плагины — хотя причина в двух-трёх неверно выбранных тегах.

Проверьте свою страницу прямо сейчас: откройте исходный код и посмотрите, сколько в нём <div> и сколько тегов со смыслом. Если первых втрое больше — начните с этой статьи сверху, по разделам. Переписывать весь сайт не придётся: как правило, достаточно переназвать несколько контейнеров и расставить забытые атрибуты.