Справочники
Справочник HTML-тегов
Элементы HTML по назначению: когда какой тег уместен, его собственные атрибуты и пример. Ищите по тегу, атрибуту или задаче — «подпись поля», «раскрывающийся блок», «картинка webp».
116 элементов. Пустые (без закрывающего тега): meta, link, base, hr, br, wbr, img, source, track, area, embed, col, input. Глобальные атрибуты (id, class, lang, dir, hidden, title, tabindex, inert, popover, data-*) есть у всех и здесь не повторяются.
Показано 116 из 116 элементов.
Документ и метаданные
<html lang="ru">
<html> — Корень документа. Атрибут lang обязателен для скринридеров и переносов.
Атрибуты: lang, dir.
<head>…</head>
<head> — Метаданные: заголовок, кодировка, стили, скрипты.
<title>Каталог — Магазин</title>
<title> — Заголовок вкладки и сниппета в поиске. Ровно один на страницу.
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta> — Метаданные: кодировка, viewport, описание, Open Graph.
Пустой элемент: закрывающего тега нет. Атрибуты: charset, name, content, http-equiv, property (RDFa, Open Graph).
<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>
<link> — Связь с внешним ресурсом: стили, иконки, предзагрузка, canonical.
Пустой элемент: закрывающего тега нет. Атрибуты: rel, href, as, type, media, sizes, crossorigin, integrity, hreflang, fetchpriority.
<style>…</style>
<style> — Встроенные стили CSS.
Атрибуты: media, blocking.
<base>
<base> — Базовый адрес для всех относительных ссылок страницы. Меняет смысл каждой ссылки — использовать осторожно.
Пустой элемент: закрывающего тега нет. Атрибуты: href, target.
<body>…</body>
<body> — Содержимое страницы.
Разделы страницы
Ориентиры (landmarks) для скринридера: header, nav, main, aside, footer. Пользователь прыгает по ним, как по оглавлению.
<header>…</header>
<header> — Шапка страницы или раздела: логотип, заголовок, навигация.
<nav aria-label="Основное меню">
<nav> — Блок основной навигации. Не для каждой группы ссылок — только для важных.
<main>…</main>
<main> — Основное содержимое. Один видимый main на странице.
<article>…</article>
<article> — Самостоятельная единица: статья, пост, карточка товара, комментарий. Имеет смысл в отрыве от страницы.
<section>…</section>
<section> — Тематический раздел с заголовком. Без заголовка обычно нужен div.
<aside>…</aside>
<aside> — Косвенно связанное: врезка, боковая колонка, реклама.
<footer>…</footer>
<footer> — Подвал страницы или раздела.
<h1>Название страницы</h1>
<h1…h6> — Заголовки шести уровней. Уровни не пропускать: после h2 — h3, а не h4.
<hgroup>…</hgroup>
<hgroup> — Заголовок вместе с подзаголовком-абзацем.
<address>…</address>
<address> — Контакты автора или владельца ближайшего article или страницы — не любой почтовый адрес.
<search><form role="search">…</form></search>
<search> — Область поиска или фильтров (новый элемент, 2023).
Блоки текста
<p>…</p>
<p> — Абзац. Внутри не может быть блоков: div или ul закроют его автоматически.
<div>…</div>
<div> — Контейнер без смысла — для вёрстки, когда нет подходящего семантического тега.
<hr>
<hr> — Смысловой разрыв между абзацами (смена темы), а не просто линия.
Пустой элемент: закрывающего тега нет.
<pre>…</pre>
<pre> — Текст с сохранением пробелов и переносов.
<blockquote>…</blockquote>
<blockquote> — Цитата блоком.
Атрибуты: cite.
<ol>…</ol>
<ol> — Нумерованный список.
Атрибуты: reversed, start, type.
<ul>…</ul>
<ul> — Маркированный список.
<li>…</li>
<li> — Пункт списка.
Атрибуты: value (в ol).
<menu>…</menu>
<menu> — Список команд — семантический вариант ul для панели кнопок.
<dl>…</dl>
<dl> — Список терминов и описаний.
<dt>…</dt>
<dt> — Термин в dl.
<dd>…</dd>
<dd> — Описание термина в dl.
<figure>…</figure>
<figure> — Самодостаточная иллюстрация: картинка, код, график — с подписью.
<figcaption>…</figcaption>
<figcaption> — Подпись к figure, первый или последний потомок.
Смысл внутри строки
strong и em несут смысл (важность и ударение), b и i — только отличие от окружающего текста без добавленной важности.
<a href="https://example.com" target="_blank" rel="noopener">Документация</a>
<a> — Ссылка. Без href — просто заглушка, не фокусируется. Для действий на странице нужна button.
Атрибуты: href, target, rel, download, hreflang, type, referrerpolicy, ping.
<strong>…</strong>
<strong> — Важное, серьёзное, срочное.
<em>…</em>
<em> — Логическое ударение: меняет смысл фразы.
<b>…</b>
<b> — Выделить без добавления важности: ключевые слова, названия.
<i lang="la">de facto</i>
<i> — Другой голос: термины, иностранные слова, мысли персонажа.
<u>…</u>
<u> — Неартикулированная пометка — например, подчеркнуть орфографическую ошибку. Путается со ссылкой.
<s>…</s>
<s> — Больше не актуально: старая цена.
<mark>…</mark>
<mark> — Подсветка, важная в текущем контексте: совпадения поиска.
<small>…</small>
<small> — Мелкий шрифт по смыслу: оговорки, юридические примечания.
<code>…</code>
<code> — Фрагмент кода.
<kbd>Ctrl</kbd>+<kbd>C</kbd>
<kbd> — Ввод с клавиатуры.
<samp>…</samp>
<samp> — Вывод программы.
<var>…</var>
<var> — Переменная в математике или программировании.
<abbr title="Hypertext Markup Language">HTML</abbr>
<abbr> — Аббревиатура; расшифровка — в title.
<q>…</q>
<q> — Короткая цитата внутри строки; кавычки браузер ставит сам.
Атрибуты: cite.
<cite>…</cite>
<cite> — Название произведения: книги, фильма, статьи — не имя автора.
<dfn>…</dfn>
<dfn> — Термин в момент его определения.
<time datetime="2026-09-22">22 сентября</time>
<time> — Дата или время в машинном виде.
Атрибуты: datetime.
<data>…</data>
<data> — Значение с машиночитаемым дублем.
Атрибуты: value.
<sub>…</sub>
<sub> — Нижний индекс: H₂O.
<sup>…</sup>
<sup> — Верхний индекс: степени, сноски.
<br>
<br> — Перенос строки внутри абзаца: стихи, адреса. Не для отступов.
Пустой элемент: закрывающего тега нет.
<wbr>
<wbr> — Место, где браузер может перенести длинное слово или адрес.
Пустой элемент: закрывающего тега нет.
<span>…</span>
<span> — Строчный контейнер без смысла.
<bdi>…</bdi>
<bdi> — Изолировать текст с неизвестным направлением письма.
<bdo>…</bdo>
<bdo> — Принудительно задать направление текста.
Атрибуты: dir.
<ruby>…</ruby>
<ruby> — Аннотация произношения (фуригана); rt — текст аннотации, rp — скобки для старых браузеров.
<ins>…</ins>
<ins> — Вставленный при правке текст.
Атрибуты: cite, datetime.
<del>…</del>
<del> — Удалённый при правке текст.
Атрибуты: cite, datetime.
Картинки и медиа
<img src="cat.jpg" alt="Рыжий кот на подоконнике" width="800" height="600" loading="lazy">
<img> — Изображение. alt обязателен: описание для незрячих или alt="" для декоративных.
Пустой элемент: закрывающего тега нет. Атрибуты: src, alt, width, height, srcset, sizes, loading, decoding, fetchpriority, crossorigin, usemap.
<picture> <source srcset="hero.avif" type="image/avif"> <img src="hero.jpg" alt="…"> </picture>
<picture> — Несколько источников картинки: форматы (AVIF, WebP) и арт-дирекшн по media. Внутри обязательно img.
<source>
<source> — Источник для picture, video, audio.
Пустой элемент: закрывающего тега нет. Атрибуты: src, srcset, sizes, type, media, width, height.
<video src="demo.mp4" controls playsinline poster="demo.jpg"></video>
<video> — Видео.
Атрибуты: src, controls, autoplay, muted, loop, playsinline, poster, preload, width, height, crossorigin.
<audio>…</audio>
<audio> — Звук.
Атрибуты: src, controls, autoplay, muted, loop, preload, crossorigin.
<track>
<track> — Субтитры и главы для video/audio в формате WebVTT.
Пустой элемент: закрывающего тега нет. Атрибуты: src, kind, srclang, label, default.
<map>…</map>
<map> — Карта кликабельных областей картинки.
Атрибуты: name.
<area>
<area> — Область в map.
Пустой элемент: закрывающего тега нет. Атрибуты: shape, coords, href, alt, target, download, rel.
<svg>…</svg>
<svg> — Встроенная векторная графика (пространство имён SVG).
Атрибуты: viewBox, width, height, xmlns.
<math>…</math>
<math> — Формула в MathML.
Атрибуты: display.
<canvas>…</canvas>
<canvas> — Холст для рисования из JS. Содержимое внутри тега видно, если canvas не поддерживается.
Атрибуты: width, height.
Встраивание
<iframe src="https://example.com/embed" title="Карта проезда" loading="lazy"></iframe>
<iframe> — Чужая страница внутри своей. title обязателен для доступности.
Атрибуты: src, srcdoc, title, width, height, loading, sandbox, allow, referrerpolicy, name.
<embed>
<embed> — Внешний плагин-контент. Сегодня почти всегда заменяется iframe, video или object.
Пустой элемент: закрывающего тега нет. Атрибуты: src, type, width, height.
<object>…</object>
<object> — Внешний ресурс (PDF, SVG) с запасным содержимым внутри.
Атрибуты: data, type, width, height, name.
Таблицы
Таблица — для табличных данных, не для вёрстки. th с scope связывает заголовки с ячейками для скринридера.
<table>…</table>
<table> — Таблица.
<caption>…</caption>
<caption> — Название таблицы, первый потомок table.
<thead>…</thead>
<thead> — Строки заголовков.
<tbody>…</tbody>
<tbody> — Тело таблицы; браузер добавит его сам, если не написать.
<tfoot>…</tfoot>
<tfoot> — Итоговые строки.
<tr>…</tr>
<tr> — Строка.
<th scope="col">Цена</th>
<th> — Ячейка-заголовок.
Атрибуты: scope, colspan, rowspan, headers, abbr.
<td>…</td>
<td> — Ячейка данных.
Атрибуты: colspan, rowspan, headers.
<colgroup>…</colgroup>
<colgroup> — Группа колонок для общих стилей ширины и фона.
Атрибуты: span.
<col>
<col> — Колонка в colgroup.
Пустой элемент: закрывающего тега нет. Атрибуты: span.
Формы
У каждого поля должна быть подпись: label с for или поле внутри label. placeholder подписью не считается — он исчезает при вводе.
<form action="/subscribe" method="post">
<form> — Форма.
Атрибуты: action, method, enctype, novalidate, autocomplete, target, name, rel.
<input type="email" name="email" autocomplete="email" required>
<input> — Поле ввода; поведение задаёт type: text, email, tel, url, number, password, search, date, time, datetime-local, month, week, color, range, file, checkbox, radio, hidden, submit, reset, button, image.
Пустой элемент: закрывающего тега нет. Атрибуты: type, name, value, placeholder, required, disabled, readonly, autocomplete, min, max, step, minlength, maxlength, pattern, multiple, accept, capture, checked, list, size, form.
<label for="email">Почта</label>
<label> — Подпись поля: клик по ней ставит фокус в поле.
Атрибуты: for.
<button type="button">Показать ещё</button>
<button> — Кнопка. По умолчанию type="submit": внутри формы любая кнопка без type её отправляет.
Атрибуты: type, name, value, disabled, form, formaction, formmethod, popovertarget, popovertargetaction, command, commandfor.
<select>…</select>
<select> — Выпадающий список.
Атрибуты: name, multiple, required, disabled, size, autocomplete, form.
<option>…</option>
<option> — Вариант в select или datalist.
Атрибуты: value, selected, disabled, label.
<optgroup>…</optgroup>
<optgroup> — Группа вариантов в select.
Атрибуты: label, disabled.
<input list="cities"> <datalist id="cities"><option value="Москва"></datalist>
<datalist> — Подсказки для input с атрибутом list.
<textarea>…</textarea>
<textarea> — Многострочное поле. Значение — между тегами, а не в value.
Атрибуты: name, rows, cols, placeholder, required, disabled, readonly, maxlength, minlength, wrap, autocomplete, form.
<fieldset>…</fieldset>
<fieldset> — Группа связанных полей: радиокнопки, адрес.
Атрибуты: disabled, name, form.
<legend>…</legend>
<legend> — Подпись группы fieldset.
<output>…</output>
<output> — Результат вычисления.
Атрибуты: for, name, form.
<progress>…</progress>
<progress> — Прогресс задачи; без value — неопределённый.
Атрибуты: value, max.
<meter>…</meter>
<meter> — Значение в известном диапазоне: заряд, заполненность диска.
Атрибуты: value, min, max, low, high, optimum.
Интерактивные элементы
<details> <summary>Как оформить возврат?</summary> <p>…</p> </details>
<details> — Раскрывающийся блок без JavaScript. Одинаковое name у нескольких details делает аккордеон.
Атрибуты: open, name.
<summary>…</summary>
<summary> — Заголовок details, по нему щёлкают.
<dialog id="confirm">…</dialog>
<dialog> — Диалог. showModal() делает его модальным: фон блокируется, фокус ловится внутри, Esc закрывает.
Атрибуты: open, closedby.
<slot>…</slot>
<slot> — Место для содержимого в Shadow DOM веб-компонента.
Атрибуты: name.
<template>…</template>
<template> — Разметка, которую браузер не отрисовывает — заготовка для клонирования из JS.
Атрибуты: shadowrootmode.
Скрипты
<script type="module" src="/app.js"></script>
<script> — JavaScript или данные (JSON-LD, importmap).
Атрибуты: src, type, async, defer, nomodule, crossorigin, integrity, referrerpolicy, fetchpriority, blocking.
<noscript>…</noscript>
<noscript> — Содержимое для браузеров с выключенным JavaScript.
Устаревшие — не использовать
Браузеры их ещё показывают, но в стандарте они запрещены. Справа — чем заменить.
<center>…</center>
<center> — Выравнивание по центру → CSS text-align или margin-inline: auto.
<font>…</font>
<font> — Шрифт, размер и цвет → CSS.
<marquee>…</marquee>
<marquee> — Бегущая строка → CSS-анимация, и то с уважением к prefers-reduced-motion.
<frameset>…</frameset>
<frameset / frame> — Страница из фреймов → обычная вёрстка или iframe.
<big>…</big>
<big> — Крупный текст → CSS font-size.
<tt>…</tt>
<tt> — Моноширинный текст → code, kbd, samp или CSS.
<acronym>…</acronym>
<acronym> — Аббревиатура → abbr.
<strike>…</strike>
<strike> — Зачёркнутое → s или del.
<applet>…</applet>
<applet> — Java-апплет → больше не поддерживается нигде.