Все теги HTML в одном месте - 134 штуки, от вездесущих <div> и <p> до тех, о которых вспоминают раз в пятилетку (привет, <bdi> и <ruby>). Разложены по 11 смысловым группам, у каждого тега короткое объяснение, живой пример и ссылка на полный урок курса, если тема заслуживает отдельного разговора.
В статье:
1. Основные HTML-теги (структура документа)
Эта группа - фундамент любой HTML-страницы: без doctype, html, head и body браузер попросту не поймёт, как читать документ. Здесь же теги, которые подключают стили, скрипты и метаданные и задают заголовок вкладки. С этих основных HTML-тегов начинается разбор HTML с нуля, дальше идёт то, что уже видно на странице.
| Тег | Для чего нужен | Пример | Урок курса |
|---|---|---|---|
<doctype> |
Объявление версии HTML в самой первой строке файла — без него браузер включает «режим совместимости» со старой вёрсткой | <!DOCTYPE html> |
Зачем нужен DOCTYPE |
<html> |
Корневой элемент страницы, обёртка для всего остального кода | <html lang="ru">...</html> |
Роли html, head и body |
<head> |
Служебная часть документа: заголовок вкладки, метаданные, подключения стилей и скриптов — ничего из этого не видно на странице | <head>...</head> |
Урок курса → |
<body> |
Всё видимое содержимое страницы — текст, картинки, кнопки | <body>...</body> |
Урок курса → |
<title> |
Заголовок вкладки браузера и заголовок сниппета в поиске | <title>Название страницы</title> |
Урок курса → |
<meta> |
Метаданные: кодировка, описание для поиска, viewport для мобильных | <meta charset="utf-8"> |
Урок курса → |
<link> |
Подключение внешних файлов — чаще всего CSS-стилей и favicon | <link rel="stylesheet" href="style.css"> |
— |
<style> |
Внутренний блок CSS-стилей прямо в head | <style>body { margin: 0; }</style> |
— |
<script> |
Подключение или встраивание JavaScript-кода | <script src="app.js"></script> |
— |
<noscript> |
Запасной контент, если у пользователя отключён JavaScript | <noscript>Включите JavaScript</noscript> |
— |
<base> |
Задаёт базовый URL для всех относительных ссылок на странице | <base href="https://example.com/"> |
— |
2. Семантические теги HTML
Семантические теги показывают браузеру и поисковику смысл каждого блока страницы, а не просто его вид. Header, nav, main, footer, article и section заменяют однообразные div понятной структурой: шапка, меню, основной контент, статья, раздел. Такая разметка легче читается не только человеком, но и скринридерами и поисковыми роботами.
| Тег | Для чего нужен | Пример | Урок курса |
|---|---|---|---|
<header> |
Шапка страницы или секции — логотип, заголовок, навигация | <header>...</header> |
Урок курса → |
<nav> |
Блок навигации — главное меню, хлебные крошки, пагинация | <nav>...</nav> |
Урок курса → |
<main> |
Основной уникальный контент страницы — на странице должен быть только один | <main>...</main> |
Урок курса → |
<article> |
Самостоятельный блок контента, который имеет смысл и вне страницы — пост, статья, карточка товара | <article>...</article> |
Урок курса → |
<section> |
Тематический раздел страницы, обычно со своим заголовком | <section>...</section> |
Урок курса → |
<aside> |
Побочный контент — сайдбар, врезка, реклама, не основной текст | <aside>...</aside> |
Урок курса → |
<footer> |
Подвал страницы или секции — копирайт, контакты, второстепенные ссылки | <footer>...</footer> |
Урок курса → |
<figure> |
Самостоятельный блок с иллюстрацией — картинка, диаграмма, код | <figure>...</figure> |
Урок курса → |
<figcaption> |
Подпись к содержимому figure | <figcaption>Подпись</figcaption> |
Урок курса → |
<address> |
Контактная информация автора страницы или статьи | <address>...</address> |
Урок курса → |
<search> |
Блок поиска на странице — семантическая альтернатива обычному div | <search>...</search> |
Урок курса → |
3. Заголовки и абзацы
Эта группа отвечает за текстовую структуру страницы. Теги h1–h6 — заголовки шести уровней: h1 самый главный, h6 самый мелкий. Тег p оформляет обычный абзац текста. hr добавляет горизонтальную линию-разделитель между смысловыми блоками, а br просто переносит текст на новую строку внутри одного абзаца.
| Тег | Для чего нужен | Пример | Урок курса |
|---|---|---|---|
<h1> |
Заголовок первого уровня — главный заголовок страницы, обычно один | <h1>Заголовок</h1> |
Урок курса → |
<h2> |
Заголовок второго уровня — крупные разделы страницы | <h2>Раздел</h2> |
Урок курса → |
<h3> |
Заголовок третьего уровня — подразделы внутри h2 | <h3>Подраздел</h3> |
Урок курса → |
<h4> |
Заголовок четвёртого уровня | <h4>...</h4> |
Урок курса → |
<h5> |
Заголовок пятого уровня | <h5>...</h5> |
Урок курса → |
<h6> |
Заголовок шестого, самого младшего уровня | <h6>...</h6> |
Урок курса → |
<hgroup> |
Группирует заголовок с подзаголовком, чтобы они считались одним целым | <hgroup><h1>Заголовок</h1><p>Подзаголовок</p></hgroup> |
— |
<p> |
Абзац текста | <p>Текст абзаца.</p> |
Урок курса → |
<hr> |
Тематический разрыв — горизонтальная линия между смысловыми блоками | <hr> |
Урок курса → |
<br> |
Перенос строки внутри одного абзаца | Строка 1<br>Строка 2 |
Урок курса → |
4. Теги для форматирования текста
Это самая большая группа — теги, которые меняют смысл или вид отдельного слова или фразы внутри текста, не создавая новый блок. Сюда входят strong и em для выделения важности, code и pre для программного кода, abbr для сокращений с расшифровкой, универсальные span и div без собственного значения — и ещё два десятка похожих тегов для более узких случаев.
| Тег | Для чего нужен | Пример | Урок курса |
|---|---|---|---|
<strong> |
Сильная важность текста — по умолчанию жирный, читается скринридером с ударением | <strong>Важно</strong> |
Урок курса → |
<em> |
Смысловое ударение на фрагменте — по умолчанию курсив | <em>правда</em> важно |
Урок курса → |
<mark> |
Выделение фрагмента маркером — например, совпадение в поиске | <mark>найдено</mark> |
Урок курса → |
<b> |
Визуально жирный текст без смыслового ударения — ключевые слова, названия | <b>Внимание</b> |
— |
<i> |
Визуальный курсив без смыслового ударения — термины, названия судов, мысли | <i>Habitat</i> |
— |
<u> |
Подчёркнутый текст без значения ссылки — орфографическая правка, имя собственное | <u>текст</u> |
Урок курса → |
<s> |
Зачёркнутый текст, который больше не актуален — старая цена, неверный факт | <s>1990 ₽</s> 1490 ₽ |
Урок курса → |
<small> |
Мелкий текст — приписки, юридические оговорки, копирайт | <small>© 2026</small> |
Урок курса → |
<sub> |
Подстрочный текст — химические формулы, сноски | H<sub>2</sub>O |
Урок курса → |
<sup> |
Надстрочный текст — степени, порядковые сокращения | x<sup>2</sup> |
Урок курса → |
<code> |
Фрагмент программного кода внутри строки текста | <code>npm install</code> |
Урок курса → |
<pre> |
Предварительно отформатированный текст — сохраняет пробелы и переносы строк как есть | <pre> строка с отступом</pre> |
Урок курса → |
<cite> |
Название источника — книги, статьи, произведения | <cite>Война и мир</cite> |
— |
<q> |
Короткая цитата внутри строки — браузер сам добавляет кавычки | <q>Быть или не быть</q> |
Урок курса → |
<blockquote> |
Развёрнутая цитата как отдельный блок | <blockquote>Текст цитаты</blockquote> |
Урок курса → |
<abbr> |
Аббревиатура с расшифровкой во всплывающей подсказке | <abbr title="Hypertext Markup Language">HTML</abbr> |
Урок курса → |
<dfn> |
Термин, который определяется прямо в этом месте текста | <dfn>Тег</dfn> — элемент разметки |
Урок курса → |
<time> |
Дата или время в машиночитаемом формате | <time datetime="2026-09-15">15 сентября</time> |
Урок курса → |
<data> |
Связывает текст с машиночитаемым значением — для скриптов и парсеров | <data value="398">Товар №398</data> |
Урок курса → |
<var> |
Имя переменной в математическом или программном контексте | <var>x</var> = 5 |
Урок курса → |
<samp> |
Вывод программы или результат её работы | <samp>Ошибка 404</samp> |
Урок курса → |
<kbd> |
Ввод с клавиатуры — сочетание клавиш | <kbd>Ctrl</kbd> + <kbd>C</kbd> |
Урок курса → |
<ruby> |
Контейнер для фонетических подсказок над иероглифами и сложными словами | <ruby>漢<rt>kan</rt></ruby> |
— |
<rt> |
Сама фонетическая подсказка внутри ruby | <rt>kan</rt> |
— |
<rp> |
Скобки вокруг подсказки для браузеров без поддержки ruby | <rp>(</rp>kan<rp>)</rp> |
— |
<bdi> |
Изолирует фрагмент текста с неизвестным направлением письма (например, имя на арабском среди русского текста) | <bdi>اسم</bdi> |
— |
<bdo> |
Принудительно меняет направление отображения текста | <bdo dir="rtl">текст</bdo> |
— |
<span> |
Строчный контейнер без своего смысла — нужен, чтобы навесить класс или стиль на часть текста | <span class="accent">слово</span> |
— |
<div> |
Блочный контейнер без своего смысла — универсальная обёртка для вёрстки | <div class="card">...</div> |
— |
<wbr> |
Точка возможного переноса строки внутри длинного слова, если оно не помещается | оченьдлинное<wbr>слово |
— |
<ins> |
Текст, добавленный в документ при правке | <ins>новый текст</ins> |
Урок курса → |
<del> |
Текст, удалённый из документа при правке — по умолчанию зачёркнутый | <del>старый текст</del> |
Урок курса → |
5. Тег гиперссылки HTML
Тег a — единственный тег в этой группе, зато один из самых важных в HTML: гиперссылка, с помощью которой пользователь переходит с одной страницы на другую, на другой раздел этой же страницы или, например, открывает письмо на почту. Именно ссылки связывают отдельные страницы в единый веб.
| Тег | Для чего нужен | Пример | Урок курса |
|---|---|---|---|
<a> |
Ссылка на другую страницу, якорь на этой же странице, email или телефон | <a href="https://example.com">Ссылка</a> |
Урок курса → |
6. HTML-теги таблицы
Эта группа — теги для табличных данных: расписаний, прайс-листов, сравнения характеристик. Тег table задаёт саму таблицу, внутри неё строки tr делятся на ячейки td и th, а thead, tbody и tfoot разбивают таблицу на шапку, тело и подвал. Отдельно стоят colgroup и col — они описывают не строки, а целые столбцы, и caption, подпись ко всей таблице.
| Тег | Для чего нужен | Пример | Урок курса |
|---|---|---|---|
<table> |
Контейнер таблицы целиком | <table>...</table> |
Урок курса → |
<caption> |
Заголовок таблицы, всегда первым внутри table | <caption>Продажи за март</caption> |
Урок курса → |
<colgroup> |
Группирует и стилизует колонки таблицы целиком, не по ячейкам | <colgroup><col><col></colgroup> |
— |
<col> |
Одна колонка внутри colgroup — например, чтобы задать её ширину | <col style="width: 30%"> |
— |
<thead> |
Шапка таблицы — строки с заголовками столбцов | <thead><tr><th>Имя</th></tr></thead> |
Урок курса → |
<tbody> |
Тело таблицы — основные строки с данными | <tbody><tr><td>Анна</td></tr></tbody> |
Урок курса → |
<tfoot> |
Подвал таблицы — итоговая строка, суммы | <tfoot><tr><td>Итого</td></tr></tfoot> |
Урок курса → |
<tr> |
Строка таблицы | <tr><td>...</td></tr> |
Урок курса → |
<td> |
Обычная ячейка с данными | <td>28</td> |
Урок курса → |
<th> |
Ячейка-заголовок строки или столбца | <th>Возраст</th> |
Урок курса → |
7. Списки в HTML
Списки — один из самых частых способов оформить перечень в HTML. ul — маркированный список, где порядок пунктов не важен, ol — нумерованный, где важен. Каждый пункт внутри обоих оформляется тегом li. Отдельный вид — список описаний dl, где термины dt идут в паре со своими определениями dd. Тег menu по разметке совпадает с ul, но обозначает список команд, а не обычный перечень.
| Тег | Для чего нужен | Пример | Урок курса |
|---|---|---|---|
<ul> |
Маркированный (ненумерованный) список | <ul><li>Пункт</li></ul> |
Урок курса → |
<ol> |
Нумерованный список — порядок пунктов имеет значение | <ol><li>Шаг 1</li></ol> |
Урок курса → |
<li> |
Пункт списка — внутри ul, ol или menu | <li>Пункт</li> |
Урок курса → |
<dl> |
Список описаний — пары термин/определение | <dl><dt>HTML</dt><dd>Язык разметки</dd></dl> |
Урок курса → |
<dt> |
Термин внутри списка описаний | <dt>HTML</dt> |
Урок курса → |
<dd> |
Определение термина внутри списка описаний | <dd>Язык разметки страниц</dd> |
Урок курса → |
<menu> |
Список команд или действий — по разметке идентичен ul | <menu><li>Копировать</li></menu> |
— |
8. Теги для форм
Без форм пользователь не может ничего отправить на сервер — ни логин, ни комментарий, ни заказ. Тег form объединяет поля в одну отправку, а input самое универсальное поле ввода, тип которого меняется от текста до чекбокса и даты. Кнопку отправки задаёт button, подпись к полю label, а выпадающий список select с вариантами option внутри. Остальные теги группы textarea, fieldset, datalist, progress и другие - решают более узкие задачи внутри той же формы.
| Тег | Для чего нужен | Пример | Урок курса |
|---|---|---|---|
<form> |
Контейнер формы — объединяет поля ввода и задаёт, куда и как отправлять данные | <form action="/submit" method="post">...</form> |
Урок курса → |
<input> |
Поле ввода — тип задаётся атрибутом type (text, email, checkbox и другие) | <input type="email" name="mail"> |
Урок курса → |
<button> |
Кнопка — отправка формы, сброс или произвольное действие через JS | <button type="submit">Отправить</button> |
Урок курса → |
<select> |
Выпадающий список вариантов | <select><option>Один</option></select> |
Урок курса → |
<option> |
Один вариант внутри select или datalist | <option value="ru">Россия</option> |
— |
<optgroup> |
Группирует несколько option в select под общим заголовком | <optgroup label="Европа">...</optgroup> |
— |
<textarea> |
Многострочное текстовое поле | <textarea rows="4"></textarea> |
Урок курса → |
<label> |
Подпись поля формы, связанная с ним через атрибут for — клик по подписи ставит фокус в поле | <label for="mail">Email</label> |
Урок курса → |
<fieldset> |
Группирует логически связанные поля формы визуальной рамкой | <fieldset>...</fieldset> |
Урок курса → |
<legend> |
Заголовок группы полей внутри fieldset | <legend>Контакты</legend> |
Урок курса → |
<datalist> |
Список подсказок для input — пользователь может выбрать или ввести своё | <datalist id="cities"><option value="Москва"></datalist> |
Урок курса → |
<output> |
Результат вычисления — например, сумма, посчитанная скриптом на лету | <output>42</output> |
— |
<progress> |
Индикатор выполнения задачи — полоса загрузки | <progress value="70" max="100"></progress> |
Урок курса → |
<meter> |
Шкала измерения в известном диапазоне — заполненность, рейтинг, уровень заряда | <meter value="0.6"></meter> |
Урок курса → |
9. Мультимедиа и изображения
Картинки, видео и звук на странице выводят разные теги. img самый частый, простое изображение, а picture умеет подставлять разный вариант картинки под разные экраны. video и audio встраивают плеер силами самого браузера, без сторонних библиотек, а source задаёт для них конкретный файл. Отдельно стоит iframe он встраивает не медиа, а целую чужую страницу, например карту или видео с другого сайта. canvas, map и area нужны реже — для рисования через JavaScript и кликабельных зон поверх картинки.
| Тег | Для чего нужен | Пример | Урок курса |
|---|---|---|---|
<img> |
Изображение на странице | <img src="photo.jpg" alt="Описание"> |
Урок курса → |
<picture> |
Контейнер для адаптивных изображений — разные картинки под разные экраны | <picture><source srcset="big.jpg"><img src="small.jpg"></picture> |
Урок курса → |
<source> |
Один из вариантов файла для picture, video или audio | <source src="video.webm" type="video/webm"> |
Урок курса → |
<video> |
Видеоплеер со встроенными в браузер элементами управления | <video src="clip.mp4" controls></video> |
Урок курса → |
<audio> |
Аудиоплеер со встроенными в браузер элементами управления | <audio src="track.mp3" controls></audio> |
Урок курса → |
<track> |
Субтитры или дорожка с текстом для video/audio | <track src="subs.vtt" kind="subtitles"> |
— |
<iframe> |
Встраивает содержимое другой страницы — карту, видео, виджет | <iframe src="https://example.com"></iframe> |
Урок курса → |
<embed> |
Встраивает внешний контент через плагин браузера — используется редко | <embed src="file.pdf"> |
— |
<object> |
Встраивает внешний ресурс — PDF, Flash (устаревающий способ), сегодня чаще заменяется iframe/img | <object data="file.pdf"></object> |
— |
<canvas> |
Область для рисования средствами JavaScript — графики, игры, анимация | <canvas id="chart"></canvas> |
— |
<map> |
Карта кликабельных областей поверх изображения | <map name="scheme"><area ...></map> |
— |
<area> |
Одна кликабельная область внутри map | <area shape="rect" coords="0,0,50,50" href="#"> |
— |
10. Интерактивные и служебные теги
Эти теги добавляют интерактивность без единой строки JavaScript. Тег details вместе с summary создают раскрывающийся блок, похожий на аккордеон или спойлер. Тег dialog открывает модальное окно прямо средствами браузера. template и slot используются реже: они хранят разметку про запас и подставляют пользовательский контент в веб-компоненты.
| Тег | Для чего нужен | Пример | Урок курса |
|---|---|---|---|
<details> |
Раскрывающийся блок — спойлер, FAQ, аккордеон без единой строки JS | <details><summary>Заголовок</summary>Текст</details> |
Урок курса → |
<summary> |
Заголовок блока details — по клику на него блок раскрывается | <summary>Показать подробности</summary> |
Урок курса → |
<dialog> |
Модальное окно, встроенное в браузер — открывается через showModal() без библиотек | <dialog open>Текст окна</dialog> |
Урок курса → |
<template> |
Разметка, которая не отображается сразу — хранится про запас для клонирования через JavaScript | <template id="row">...</template> |
— |
<slot> |
Место для вставки пользовательского контента внутрь веб-компонента | <slot name="header"></slot> |
— |
11. Устаревшие HTML-теги
Эти теги когда-то были частью HTML, но сегодня не используются - браузеры ещё могут их отобразить, но валидатор укажет на ошибку, а актуальные задачи эти теги решают через CSS. В таблице - чем заменить каждый из них.
| Тег | Что делал | Чем заменить |
|---|---|---|
<center> (не используется) |
Центрировал содержимое по горизонтали | CSS: text-align: center (текст) или margin: 0 auto (блок) |
<font> (не используется) |
Задавал шрифт, размер и цвет текста прямо в разметке | CSS: font-family, font-size, color |
<marquee> (не используется) |
Бегущая строка — двигал текст или картинку по экрану | CSS-анимация: @keyframes + animation |
<blink> (не используется) |
Заставлял текст мигать — никогда не было в стандарте, поддерживалось только Netscape/Firefox | CSS-анимация с opacity, если мигание правда нужно |
<acronym> (не используется) |
Обозначал акроним — заменён на более общий abbr | abbr |
<big> (не используется) |
Увеличивал размер шрифта | CSS: font-size больше базового |
<strike> (не используется) |
Зачёркивал текст | s (актуальность) или del (правка документа) |
<tt> (не используется) |
Моноширинный «телетайпный» текст | code или CSS: font-family: monospace |
<frame> (не используется) |
Одна панель в наборе frameset — разбивал окно браузера на независимые страницы | iframe (для встраивания) или CSS Grid/Flexbox (для разметки) |
<frameset> (не используется) |
Контейнер, делящий окно браузера на несколько frame | CSS Grid/Flexbox для разметки страницы |
<noframes> (не используется) |
Запасной контент для браузеров без поддержки frameset | Не нужен — frameset не используется |
<applet> (не используется) |
Встраивал Java-апплет на страницу | canvas, video или JavaScript-приложение |
<basefont> (не используется) |
Задавал шрифт по умолчанию для всей страницы | CSS: font-family на body |
<dir> (не используется) |
Список каталога — визуально не отличался от ul | ul |
<isindex> (не используется) |
Строка поиска, вшитая в сам документ в ранних версиях HTML | form с input type="search" |
<listing> (не используется) |
Выводил текст моноширинным шрифтом с сохранением пробелов — предшественник pre | pre или code |
<nobr> (не используется) |
Запрещал перенос строки внутри фрагмента | CSS: white-space: nowrap |
<noembed> (не используется) |
Запасной контент для браузеров без поддержки embed | Не нужен — все современные браузеры поддерживают embed |
<plaintext> (не используется) |
Выводил весь оставшийся текст как есть, без разбора тегов — даже не требовал закрытия | pre или CSS: white-space: pre |
<spacer> (не используется) |
Невидимая распорка для управления отступами — приём эпохи вёрстки таблицами | CSS: margin, padding, gap |
<xmp> (не используется) |
Похож на pre — выводил блок текста как есть, без экранирования | pre с экранированием через < > |