Дата актуализации: 6 мая 2026.
Основа списка: WHATWG HTML Living Standard, раздел Index -> Elements, обновлен 5 мая 2026. MDN использован как учебный справочник и для пометок про obsolete/experimental.
Как читать этот файл:
Название- почему тег называется именно так или что означает сокращение.Смысл- что элемент сообщает браузеру и человеку.Пример- минимальный учебный пример.Статус- учить сейчас, знать, использовать редко или не использовать.
HTML-тег обычно назван по английскому смыслу:
- полное слово:
article,section,footer; - сокращение:
p= paragraph,a= anchor,img= image; - историческое имя:
bраньше значил bold,i- italic, но современный смысл шире; - техническая аббревиатура:
bdi= bidirectional isolation,wbr= word break opportunity.
Не нужно зубрить названия вслепую. Нужно понять идею, из которой имя возникло.
| Элемент | Название | Смысл | Пример | Статус |
|---|---|---|---|---|
html |
HyperText Markup Language, корневой HTML-элемент | Вся HTML-страница. Все остальные элементы внутри него. | <html lang="ru">...</html> |
Учить |
head |
“голова” документа | Служебная информация, не основное видимое содержание. | <head><title>...</title></head> |
Учить |
title |
title = заголовок/название | Название вкладки браузера и важный сигнал для поиска. | <title>HTML курс</title> |
Учить |
base |
base = основа | Базовый URL для относительных ссылок. Может быть только один. | <base href="https://example.com/"> |
Знать, редко |
link |
link = связь | Связывает документ с внешним ресурсом: CSS, icon, canonical. | <link rel="stylesheet" href="styles.css"> |
Учить |
meta |
metadata = данные о данных | Метаданные, которые не выражаются через title, link, style. |
<meta charset="utf-8"> |
Учить |
style |
style = стиль | CSS внутри HTML. Для учебы можно, в проектах чаще внешний CSS. | <style>body { font-family: system-ui; }</style> |
Учить, но не злоупотреблять |
body |
body = тело | Видимое и интерактивное содержимое документа. | <body><main>...</main></body> |
Учить |
| Элемент | Название | Смысл | Пример | Статус |
|---|---|---|---|---|
header |
header = верхняя/вводная часть | Вступление страницы или раздела: логотип, навигация, заголовок. | <header>...</header> |
Учить |
footer |
footer = нижняя часть | Завершение страницы или раздела: автор, ссылки, copyright. | <footer>© 2026</footer> |
Учить |
main |
main = главное | Главное содержимое страницы. Обычно один main. |
<main><h1>...</h1></main> |
Учить |
nav |
navigation = навигация | Блок важных ссылок для перемещения. | <nav aria-label="Основная навигация">...</nav> |
Учить |
article |
article = статья/самостоятельный материал | Контент, который может жить отдельно: статья, пост, карточка товара. | <article><h2>Новость</h2></article> |
Учить |
section |
section = раздел | Тематический раздел, обычно с заголовком. | <section><h2>FAQ</h2></section> |
Учить |
aside |
aside = в стороне | Дополнительная информация, косвенно связанная с главным содержимым. | <aside>Похожие статьи</aside> |
Учить |
address |
address = адрес/контакты | Контактная информация автора или владельца страницы/раздела. | <address>Email: <a href="mailto:a@b.com">a@b.com</a></address> |
Учить |
search |
search = поиск | Область с поиском или фильтрацией. Новый семантический контейнер. | <search><form role="search">...</form></search> |
Учить как современный |
h1-h6 |
heading 1-6 = заголовок уровня 1-6 | Иерархия заголовков. h1 самый высокий уровень. |
<h1>Главная тема</h1> |
Учить |
hgroup |
heading group = группа заголовка | Группирует заголовок и подзаголовок/слоган. | <hgroup><h1>Сайт</h1><p>Слоган</p></hgroup> |
Знать, использовать осторожно |
| Элемент | Название | Смысл | Пример | Статус |
|---|---|---|---|---|
p |
paragraph = абзац | Абзац или связанная группа фразового контента. | <p>Текст абзаца.</p> |
Учить |
hr |
horizontal rule = горизонтальная линия, исторически | Сейчас означает тематический разрыв, смену темы. | <hr> |
Учить |
pre |
preformatted = заранее отформатированный | Сохраняет пробелы и переносы, часто для кода. | <pre><code>npm run build</code></pre> |
Учить |
blockquote |
block quote = блочная цитата | Длинная цитата отдельным блоком. | <blockquote cite="https://example.com">...</blockquote> |
Учить |
ol |
ordered list = упорядоченный список | Список, где порядок важен. | <ol><li>Первый</li></ol> |
Учить |
ul |
unordered list = неупорядоченный список | Список, где порядок не важен. | <ul><li>HTML</li></ul> |
Учить |
menu |
menu = меню | Семантический список команд; часто ведет себя как ul. |
<menu><li><button>Save</button></li></menu> |
Знать |
li |
list item = пункт списка | Элемент внутри ol, ul или menu. |
<li>Пункт</li> |
Учить |
dl |
description list = список описаний | Список пар “термин/имя - описание/значение”. | <dl>...</dl> |
Учить |
dt |
description term = термин описания | Термин или имя в dl. |
<dt>HTML</dt> |
Учить |
dd |
description details = детали/описание | Описание или значение для dt. |
<dd>Язык разметки.</dd> |
Учить |
figure |
figure = иллюстрация/фигура | Самостоятельный блок: изображение, схема, пример кода. | <figure>...</figure> |
Учить |
figcaption |
figure caption = подпись фигуры | Подпись к figure. |
<figcaption>Описание</figcaption> |
Учить |
div |
division = разделение/блок | Нейтральный блочный контейнер без собственного смысла. | <div class="wrapper">...</div> |
Учить, но не злоупотреблять |
| Элемент | Название | Смысл | Пример | Статус |
|---|---|---|---|---|
a |
anchor = якорь | Ссылка на URL или место в документе. | <a href="/about">О нас</a> |
Учить |
em |
emphasis = ударение | Смысловое ударение. | <em>очень</em> |
Учить |
strong |
strong importance = сильная важность | Важный текст. | <strong>Важно</strong> |
Учить |
small |
small print = мелкое примечание | Побочное примечание, юридический текст. | <small>Условия акции...</small> |
Учить |
s |
strikethrough = зачеркнутый, исторически | Теперь: неточная или уже не актуальная информация. | <s>Старая цена</s> |
Учить |
cite |
citation = ссылка на источник/название работы | Название произведения или источника. | <cite>HTML Standard</cite> |
Учить |
q |
quote = короткая цитата | Короткая встроенная цитата. | <q>Учись руками</q> |
Учить |
dfn |
definition = определение | Место, где термин определяется впервые. | <dfn>HTML</dfn> - язык разметки. |
Учить |
abbr |
abbreviation = аббревиатура | Аббревиатура или сокращение. | <abbr title="HyperText Markup Language">HTML</abbr> |
Учить |
ruby |
ruby annotation = руби-аннотация | Аннотации произношения для восточноазиатского текста. | <ruby>漢<rt>kan</rt></ruby> |
Знать |
rt |
ruby text = текст ruby | Текст аннотации внутри ruby. |
<rt>kan</rt> |
Знать |
rp |
ruby parenthesis = скобки ruby | Скобки fallback для браузеров без ruby. | <rp>(</rp><rt>kan</rt><rp>)</rp> |
Знать |
data |
data = данные | Человекочитаемый текст + машинное значение. | <data value="42">Сорок два</data> |
Знать |
time |
time = время | Дата/время с машинно-читаемым datetime. |
<time datetime="2026-05-06">6 мая 2026</time> |
Учить |
code |
code = код | Фрагмент компьютерного кода. | <code>button</code> |
Учить |
var |
variable = переменная | Переменная в формуле или коде. | <var>x</var> |
Знать |
samp |
sample output = пример вывода | Вывод программы/команды. | <samp>Done</samp> |
Знать |
kbd |
keyboard = клавиатура | Пользовательский ввод. | <kbd>Ctrl</kbd> + <kbd>S</kbd> |
Учить |
sub |
subscript = нижний индекс | Нижний индекс. | H<sub>2</sub>O |
Учить |
sup |
superscript = верхний индекс | Верхний индекс. | 10<sup>2</sup> |
Учить |
i |
italic = курсив, исторически | Альтернативный голос, термин, название, настроение. | <i lang="la">Carpe diem</i> |
Учить отличие |
b |
bold = жирный, исторически | Ключевое слово/выделение без смысловой важности. | <b>Новинка</b> |
Учить отличие |
u |
underline = подчеркнутый, исторически | Неартикулированная аннотация, например орфографическая пометка. | <u>ошбка</u> |
Знать, осторожно |
mark |
mark = отметка | Подсветка релевантного текста. | <mark>найдено</mark> |
Учить |
bdi |
bidirectional isolation = изоляция направления текста | Изолирует текст с неизвестным направлением письма. | <bdi>اسم</bdi> |
Знать |
bdo |
bidirectional override = принудительное направление | Принудительно меняет направление текста. | <bdo dir="rtl">abc</bdo> |
Знать |
span |
span = диапазон/отрезок | Нейтральный строчный контейнер без смысла. | <span class="price">$9</span> |
Учить, но не злоупотреблять |
br |
break = перенос строки | Перенос строки, например в стихе или адресе. | Line 1<br>Line 2 |
Учить, не для отступов |
wbr |
word break opportunity = возможность разрыва слова | Место, где длинное слово можно перенести. | super<wbr>long<wbr>word |
Знать |
| Элемент | Название | Смысл | Пример | Статус |
|---|---|---|---|---|
ins |
inserted = вставлено | Добавленный текст. | <ins datetime="2026-05-06">Новый текст</ins> |
Знать |
del |
deleted = удалено | Удаленный текст. | <del>Старый текст</del> |
Знать |
| Элемент | Название | Смысл | Пример | Статус |
|---|---|---|---|---|
picture |
picture = изображение | Контейнер responsive/art-directed изображения. | <picture><img src="photo.jpg" alt=""></picture> |
Учить |
source |
source = источник | Источник для picture, video, audio. |
<source srcset="small.jpg" media="(max-width: 600px)"> |
Учить |
img |
image = изображение | Контентное изображение. | <img src="cat.jpg" alt="Кот" width="600" height="400"> |
Учить |
iframe |
inline frame = встроенная рамка/страница | Встраивает другую страницу. | <iframe src="map.html" title="Карта"></iframe> |
Учить осторожно |
embed |
embed = встроить | Встраивание внешнего ресурса/плагина. | <embed src="file.pdf" type="application/pdf"> |
Знать, редко |
object |
object = объект | Встраиваемый ресурс с fallback-содержимым. | <object data="file.pdf" type="application/pdf">PDF</object> |
Знать, редко |
video |
video = видео | Видеоплеер. | <video controls src="movie.mp4"></video> |
Учить |
audio |
audio = аудио | Аудиоплеер. | <audio controls src="song.mp3"></audio> |
Учить |
track |
track = дорожка | Субтитры/текстовые дорожки для audio/video. |
<track kind="subtitles" src="ru.vtt" srclang="ru" label="Русский"> |
Учить |
map |
image map = карта изображения | Карта кликабельных областей изображения. | <map name="planet-map">...</map> |
Знать |
area |
area = область | Область внутри image map. | <area shape="rect" coords="0,0,50,50" href="/one" alt="Один"> |
Знать |
canvas |
canvas = холст | Растровый холст для рисования через JavaScript. | <canvas width="300" height="150"></canvas> |
Знать |
svg |
Scalable Vector Graphics = масштабируемая векторная графика | Корень SVG внутри HTML. Это отдельный язык разметки. | <svg viewBox="0 0 10 10" aria-hidden="true"></svg> |
Знать |
math |
MathML math = математическая разметка | Корень MathML внутри HTML. | <math><mi>x</mi></math> |
Знать |
| Элемент | Название | Смысл | Пример | Статус |
|---|---|---|---|---|
table |
table = таблица | Табличные данные. Не layout. | <table>...</table> |
Учить |
caption |
caption = подпись | Название/подпись таблицы. | <caption>Расписание</caption> |
Учить |
colgroup |
column group = группа колонок | Группа колонок для общих свойств. | <colgroup><col span="2"></colgroup> |
Знать |
col |
column = колонка | Описывает одну или несколько колонок. | <col span="2"> |
Знать |
thead |
table head = голова таблицы | Группа строк заголовка. | <thead>...</thead> |
Учить |
tbody |
table body = тело таблицы | Основные строки таблицы. | <tbody>...</tbody> |
Учить |
tfoot |
table foot = низ таблицы | Итоговые/нижние строки таблицы. | <tfoot>...</tfoot> |
Знать |
tr |
table row = строка таблицы | Строка таблицы. | <tr>...</tr> |
Учить |
th |
table header = заголовочная ячейка | Ячейка-заголовок строки или колонки. | <th scope="col">День</th> |
Учить |
td |
table data = ячейка данных | Обычная ячейка данных. | <td>HTML</td> |
Учить |
| Элемент | Название | Смысл | Пример | Статус |
|---|---|---|---|---|
form |
form = форма | Контейнер отправки данных. | <form action="/send" method="post">...</form> |
Учить |
label |
label = подпись | Подпись поля формы. | <label for="email">Email</label> |
Учить |
input |
input = ввод | Универсальное однострочное поле разных типов. | <input id="email" name="email" type="email"> |
Учить |
button |
button = кнопка | Кнопка действия или отправки формы. | <button type="submit">Отправить</button> |
Учить |
select |
select = выбрать | Список выбора. | <select name="city">...</select> |
Учить |
datalist |
data list = список данных | Подсказки для input. |
<input list="cities"><datalist id="cities">...</datalist> |
Учить |
optgroup |
option group = группа вариантов | Группа option внутри select. |
<optgroup label="Украина">...</optgroup> |
Знать |
option |
option = вариант | Вариант в select или datalist. |
<option value="kyiv">Киев</option> |
Учить |
selectedcontent |
selected content = выбранное содержимое | Отображает содержимое выбранного option внутри кастомизируемого select. |
<selectedcontent></selectedcontent> |
Знать как новое/продвинутое |
textarea |
text area = текстовая область | Многострочный ввод текста. | <textarea name="message" rows="5"></textarea> |
Учить |
output |
output = вывод | Результат вычисления или действия пользователя. | <output name="result">0</output> |
Знать |
progress |
progress = прогресс | Прогресс выполнения задачи. | <progress value="40" max="100">40%</progress> |
Знать |
meter |
meter = измеритель | Значение в известном диапазоне. | <meter value="0.7">70%</meter> |
Знать |
fieldset |
field set = набор полей | Группирует связанные поля формы. | <fieldset>...</fieldset> |
Учить |
legend |
legend = легенда/название | Название fieldset. |
<legend>Контакты</legend> |
Учить |
| Элемент | Название | Смысл | Пример | Статус |
|---|---|---|---|---|
details |
details = подробности | Раскрываемый блок. | <details><summary>Вопрос</summary><p>Ответ</p></details> |
Учить |
summary |
summary = краткое содержание | Видимый заголовок/кнопка для details. |
<summary>Подробнее</summary> |
Учить |
dialog |
dialog = диалоговое окно | Модальное или немодальное окно. | <dialog id="modal">...</dialog> |
Учить |
| Элемент | Название | Смысл | Пример | Статус |
|---|---|---|---|---|
script |
script = сценарий | JavaScript или данные определенного типа. | <script src="app.js" defer></script> |
Учить |
noscript |
no script = без скрипта | Fallback, если скрипты выключены/не поддерживаются. | <noscript>Включите JavaScript.</noscript> |
Знать |
template |
template = шаблон | HTML, который не рендерится сразу. | <template id="card-template">...</template> |
Знать |
slot |
slot = слот/место | Место для внешнего контента в Web Component. | <slot name="title"></slot> |
Знать |
| autonomous custom elements | пользовательские элементы с дефисом | Авторские элементы Web Components. | <user-card></user-card> |
Знать после базы |
| Элемент | Название | Смысл | Пример | Статус |
|---|---|---|---|---|
geolocation |
geolocation = геолокация | Декларативный контроль запроса геопозиции. MDN помечает как experimental и not Baseline. | <geolocation><button>Use location</button></geolocation> |
Не учить как базу |
MDN прямо предупреждает: это старые HTML-элементы, deprecated, их не нужно использовать в новых проектах.
| Элемент | Почему название такое | Почему не использовать | Замена |
|---|---|---|---|
acronym |
acronym = акроним | Устарел. | abbr |
big |
big = большой | Внешний вид должен делать CSS. | CSS font-size |
center |
center = центрировать | Оформление через HTML устарело. | CSS |
content |
старый Web Components insertion point | Заменен. | slot |
dir |
directory = список директорий | Устарел. | ul |
font |
font = шрифт | Оформление через HTML устарело. | CSS |
frame |
frame = фрейм | Старые framesets устарели. | современный layout, иногда iframe |
frameset |
frame set = набор фреймов | Устаревшая структура страниц. | современный HTML/CSS |
image |
древний предшественник img |
Не стандартная современная практика. | img |
marquee |
marquee = бегущая строка | Устаревшая анимация. | CSS/JS по необходимости |
menuitem |
menu item = пункт меню | Устарел. | button, li, ARIA при необходимости |
nobr |
no break = не переносить | Ломает адаптивность. | CSS white-space осторожно |
noembed |
fallback для embed | Устарел. | fallback внутри object или обычный HTML |
noframes |
fallback для frames | Устарел вместе с frames. | не использовать frames |
param |
parameter = параметр object | Устаревшая модель plugins/object. | современные embed/API |
plaintext |
plain text = простой текст | Ломает парсинг всего после себя. | pre, code, escaping |
rb |
ruby base = база ruby | Устаревшая часть ruby-модели. | ruby, rt, rp |
rtc |
ruby text container | Устаревшее ruby-расширение. | ruby, rt, rp |
shadow |
старый Shadow DOM insertion point | Заменен. | slot |
strike |
зачеркнуть | Устарел. | s или del по смыслу |
tt |
teletype = моноширинный терминал | Внешний вид через HTML устарел. | code, CSS monospace |
xmp |
example/preformatted исторически | Устарел, опасен для парсинга. | pre + code + escaping |
Разложи имя:
- одна буква часто историческая:
p,a,b,i,q,s,u; - две-три буквы часто сокращают фразу:
img,nav,col,pre,kbd; - составные имена читаются как английские слова:
blockquote,figcaption,fieldset; - префикс
tв таблицах часто значит table:tr,td,th,thead,tbody,tfoot; optзначит option:optgroup;srcв атрибутах значит source, но тег называетсяsourceполностью;- если имя описывает внешний вид (
big,center,font), почти всегда это старый HTML и сегодня нужен CSS.
html,head,title,meta,link,body.main,header,footer,nav,article,section,aside.h1-h6,p,a,strong,em,ul,ol,li.img,figure,figcaption,picture,source.table,caption,tr,th,td.form,label,input,button,textarea,select,option,fieldset,legend.details,summary,dialog,template.
Остальные элементы изучай по мере задач.