Все теги HTML в одном месте - 150 штук, от вездесущих <div> и <p> до тех, о которых вспоминают раз в пятилетку (привет, <bdi> и <ruby>). Разложены по 11 смысловым группам, у каждого тега короткое объяснение, живой пример и ссылка на полный урок курса, если тема заслуживает отдельного разговора.
В статье:
1. Основные HTML-теги (структура документа)
Эта группа - фундамент любой HTML-страницы: без doctype браузер включает режим совместимости, а html, head и body достраивает сам, но писать их нужно, чтобы разметка была предсказуемой. Здесь же теги, которые подключают стили, скрипты и метаданные и задают заголовок вкладки. С этих основных HTML-тегов начинается разбор HTML с нуля, дальше идёт то, что уже видно на странице.
| Тег | Для чего нужен | Пример | Урок курса |
|---|---|---|---|
<!DOCTYPE> |
Объявление типа документа в самой первой строке файла - без него браузер включает «режим совместимости» со старой вёрсткой | <!DOCTYPE html> |
Зачем нужен DOCTYPE |
<html> |
Корневой элемент страницы, обёртка для всего остального кода | <html lang="ru">...</html> |
Роли html, head и body |
<head> |
Служебная часть документа: заголовок вкладки, метаданные, подключения стилей и скриптов - ничего из этого не видно на странице | <head>...</head> |
Место head в структуре документа |
<body> |
Всё видимое содержимое страницы - текст, картинки, кнопки | <body>...</body> |
Тело HTML-документа |
<title> |
Заголовок вкладки браузера и заголовок сниппета в поиске | <title>Название страницы</title> |
Для чего нужен title |
<meta> |
Метаданные: кодировка, описание для поиска, viewport для мобильных | <meta charset="utf-8"> |
Мета-теги для SEO |
<link> |
Подключение внешних файлов - чаще всего CSS-стилей и favicon | <link rel="stylesheet" href="style.css"> |
Внешний CSS-файл |
<style> |
Внутренний блок CSS-стилей прямо в head | <style>body { margin: 0; }</style> |
Внутренний CSS-блок |
<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> |
Роль страницы в HTML: теги header и footer |
<nav> |
Блок навигации - главное меню, хлебные крошки, пагинация | <nav>...</nav> |
Ссылки на другие страницы в HTML: тег nav |
<main> |
Основной уникальный контент страницы - на странице должен быть только один | <main>...</main> |
Главный контент страницы в HTML: тег main |
<article> |
Самостоятельный блок контента, который имеет смысл и вне страницы - пост, статья, карточка товара | <article>...</article> |
Самостоятельный блок контента в HTML: тег article |
<section> |
Тематический раздел страницы, обычно со своим заголовком | <section>...</section> |
Тематический блок с заголовком в HTML: тег section |
<aside> |
Побочный контент - сайдбар, врезка, реклама, не основной текст | <aside>...</aside> |
Сопутствующий блок в HTML: тег aside |
<footer> |
Подвал страницы или секции - копирайт, контакты, второстепенные ссылки | <footer>...</footer> |
Роль страницы в HTML: теги header и footer |
<figure> |
Самостоятельный блок с иллюстрацией - картинка, диаграмма, код | <figure>...</figure> |
Тег figure |
<figcaption> |
Подпись к содержимому figure | <figcaption>Подпись</figcaption> |
Тег figcaption |
<address> |
Контактная информация автора страницы или статьи | <address>...</address> |
Контакты автора: address |
<search> |
Блок поиска на странице - семантическая альтернатива обычному div | <search>...</search> |
Блок поиска: search |
3. Заголовки и абзацы
Эта группа отвечает за текстовую структуру страницы. Теги h1-h6 - заголовки шести уровней: h1 самый главный, h6 самый мелкий. Тег p оформляет обычный абзац текста. hr добавляет горизонтальную линию-разделитель между смысловыми блоками, а br просто переносит текст на новую строку внутри одного абзаца.
| Тег | Для чего нужен | Пример | Урок курса |
|---|---|---|---|
<h1> |
Заголовок первого уровня - главный заголовок страницы, обычно один | <h1>Заголовок</h1> |
Сколько h1 может быть на странице |
<h2> |
Заголовок второго уровня - крупные разделы страницы | <h2>Раздел</h2> |
Что такое уровни заголовков h1-h6 |
<h3> |
Заголовок третьего уровня - подразделы внутри h2 | <h3>Подраздел</h3> |
Как устроены уровни заголовков h1–h6 |
<h4> |
Заголовок четвёртого уровня - подразделы внутри h3 | <h4>Подпункт</h4> |
Уровни заголовков h1-h6 |
<h5> |
Заголовок пятого уровня - появляется во вложенных блоках | <h5>Пункт врезки</h5> |
— |
<h6> |
Заголовок шестого, самого младшего уровня | <h6>Подпункт</h6> |
— |
<hgroup> |
Объединяет заголовок и подзаголовок в один блок | <hgroup><h1>Заголовок</h1><p>Подзаголовок</p></hgroup> |
— |
<p> |
Абзац текста - блочный элемент с отступами сверху и снизу | <p>Текст абзаца.</p> |
Что делает тег p и чем абзац отличается от пустой строки в коде |
<hr> |
Тематический разрыв - горизонтальная линия между смысловыми блоками | <hr> |
Тег hr: черта, которая обозначает смену темы |
<br> |
Перенос строки внутри одного абзаца | Строка 1<br>Строка 2 |
Тег br: перенос строки внутри одной мысли |
4. Теги для форматирования текста
Это самая большая группа: теги, которые меняют смысл или вид слова или фразы в тексте. Почти все они строчные и не создают новый блок, но есть и блочные, например pre, blockquote и div. Сюда входят strong и em для выделения важности, code и pre для программного кода, abbr для сокращений с расшифровкой, универсальные span и div без собственного значения - и ещё больше двадцати похожих тегов для более узких случаев.
| Тег | Для чего нужен | Пример | Урок курса |
|---|---|---|---|
<strong> |
Важный, серьёзный или срочный фрагмент текста - жирный шрифт появляется как следствие, а не как цель | <strong>Важно</strong> |
Чем strong отличается от b |
<em> |
Акцент в предложении - слово, на которое падает ударение и от которого зависит смысл | Я <em>вчера</em> купил хлеб. |
Чем em отличается от i |
<mark> |
Отмечает фрагмент, нужный читателю прямо сейчас, например найденное слово - по умолчанию с жёлтым фоном | Найдено: <mark>сайт</mark> |
Когда использовать mark |
<b> |
Отмечает фрагмент, на который стоит обратить внимание, без смысла важности - по умолчанию полужирным | Чайник <b>Аква-2</b> греет быстро. |
Чем strong отличается от b |
<i> |
Отмечает текст «другим голосом» - термин, иностранное слово, мысль автора - по умолчанию курсивом, без ударения и важности | Она подумала: <i>Опять опоздал.</i> |
Чем em отличается от i |
<u> |
Выделяет текст как требующий внимания, например слово с ошибкой в написании - по умолчанию подчёркиванием. | Потом <u>пошол</u> домой. |
Зачёркнутое и подчёркнутое: s и u |
<s> |
Зачёркнутое, что больше не актуально - старая цена, снятое условие | Чайник: <s>1200 ₽</s> 990 ₽. |
Теги s и u: когда зачёркивать и подчёркивать текст |
<small> |
Побочная оговорка мелким шрифтом - условие к цене, права на текст | Цена от 990 ₽ <small>при заказе от двух штук</small> |
Мелкий текст: small |
<sub> |
Нижний индекс: числа атомов в формуле, номера переменных | CO<sub>2</sub> |
Индексы и степени: sub и sup |
<sup> |
Верхний индекс: степень, единица площади, номер сноски | 18 м<sup>2</sup> |
Теги sub и sup: подстрочный и надстрочный текст |
<code> |
Короткий фрагмент кода в тексте | <code>git status</code> |
Код на странице: pre и code |
<pre> |
Выводит текст как записан: пробелы, табуляции и переносы строк остаются на своих местах | <pre> отступ сохранён</pre> |
Код на странице: pre и code |
<cite> |
Отмечает название произведения: книги, статьи, фильма. Не цитата и не имя автора | <cite>Тетрис</cite> |
Блочная цитата: blockquote и cite |
<q> |
Отмечает короткую цитату внутри предложения, кавычки добавляет браузер | <q>текст</q> |
Строчная цитата: q и cite |
<blockquote> |
Отмечает длинную цитату из другого источника отдельным блоком с отступом | <blockquote>Цитата</blockquote> |
Блочная цитата: blockquote и cite |
<abbr> |
Отмечает аббревиатуру, а в title записывается её расшифровка | <abbr title="Cascading Style Sheets">CSS</abbr> |
Аббревиатуры и время: abbr и time |
<dfn> |
Обозначает термин в том месте, где его определяют | <dfn>Вьюпорт</dfn> |
Термин определяется здесь: dfn |
<time> |
Обозначает дату, время или временной промежуток, а атрибут datetime содержит машинно читаемое значение. |
<time datetime="2026-09-25">25 сентября</time> |
Аббревиатуры и время: abbr и time |
<data> |
Связывает видимый текст со значением для программы в атрибуте value | <data value="1290">1 290 ₽</data> |
Переменные и значения: var и data |
<var> |
Отмечает переменную или слово-заполнитель в формуле, коде и инструкции | <var>x</var> |
Переменные и значения: var и data |
<samp> |
Отмечает вывод программы: сообщение, ошибку, результат команды | <samp>Готово</samp> |
Ввод и вывод: kbd и samp |
<kbd> |
Обозначает ввод пользователя: отдельную клавишу, сочетание клавиш или команду. | <kbd>Ctrl</kbd> |
Ввод и вывод: kbd и samp |
<ruby> |
Добавляет аннотацию над текстом или под ним: чтение иероглифов, транскрипцию | <ruby>猫<rt>ねこ</rt></ruby> |
— |
<rt> |
Записывает аннотацию внутри ruby: чтение иероглифа, транскрипцию, пояснение | <rt>ねこ</rt> |
— |
<rp> |
Записывает скобки вокруг rt для браузеров без поддержки ruby | <rp>(</rp> |
— |
<bdi> |
Изолирует фрагмент текста от направления письма вокруг него | <bdi>שלום</bdi> |
— |
<bdo> |
Принудительно задаёт направление письма для своего текста | <bdo dir="rtl">Hello</bdo> |
— |
<span> |
Универсальный строчный контейнер без смысла для стиля и скриптов | <span class="price">1 290 ₽</span> |
— |
<div> |
Универсальный блочный контейнер без смысла для оформления и макета | <div class="card">...</div> |
— |
<wbr> |
Отмечает место, где браузер может перенести длинное слово или адрес | <wbr> |
— |
<ins> |
Отмечает добавленный в документ текст, а в атрибутах хранит причину и дату правки | <ins>19 октября</ins> |
Правки в тексте: del и ins |
del |
Отмечает удалённый из документа текст, а в атрибутах хранит причину и дату правки | <del>12 октября</del> |
Правки в тексте: del и ins |
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> |
Выводит данные в строках и столбцах; вид таблицы задаёт CSS, а старые атрибуты border и width устарели | <table><tr><td>Чай</td><td>120</td></tr></table> |
Тег table - только для данных |
<caption> |
Задаёт заголовок таблицы; всегда выводится над таблицей или под ней, не входит в её рамку и фон | <caption>Цены на чай</caption> |
Секции таблицы: thead, tbody, tfoot и caption |
<colgroup> |
Объединяет колонки таблицы в группу, чтобы задать им общую ширину, фон или скрытие; сам ничего не выводит | <colgroup span="2"></colgroup> |
— |
<col> |
Задаёт стили одной колонки таблицы внутри colgroup; пустой тег без закрывающего | <col span="2"> |
— |
<thead> |
Группирует строки шапки таблицы; выводится над телом и повторяется при печати на каждой странице | <thead>...</thead> |
Шапка таблицы thead: как разделить таблицу на секции |
<tbody> |
Группирует строки с данными таблицы; секцию браузер достраивает сам, а групп может быть несколько | <tbody>...</tbody> |
Тело таблицы tbody: группы строк и секции таблицы |
<tfoot> |
Группирует итоговые строки таблицы; выводится под телом и при печати повторяется на каждой странице | <tfoot>...</tfoot> |
Подвал таблицы tfoot: итоговая строка и порядок секций |
<tr> |
Задаёт строку таблицы: внутри записывают ячейки td и th; собственных атрибутов нет, а стили действуют не все | <tr>...</tr> |
Строка таблицы tr: ячейки td и число колонок |
<td> |
Задаёт ячейку с данными в строке таблицы; colspan и rowspan объединяют ячейки, размеры и выравнивание задаёт CSS | <td>...</td> |
Ячейка таблицы td: данные в строке tr и число ячеек |
<th> |
Задаёт ячейку-заголовок колонки или строки таблицы; scope и headers связывают её с данными для скринридера | <th scope="col">...</th> |
Тег th и атрибут scope: заголовки колонок и строк таблицы |
7. Списки в HTML
Списки - один из самых частых способов оформить перечень в HTML. ul - маркированный список, где порядок пунктов не важен, ol - нумерованный, где важен. Каждый пункт внутри обоих оформляется тегом li. Отдельный вид - список описаний dl, где термины dt идут в паре со своими определениями dd. Тег menu по разметке совпадает с ul, но обозначает список команд, а не обычный перечень.
| Тег | Для чего нужен | Пример | Урок курса |
|---|---|---|---|
<ul> |
Маркированный список: контейнер для пунктов li, у которых порядок не важен | <ul><li>Пункт</li></ul> |
Маркированный список ul: чем отличается от ol |
<ol> |
Нумерованный список: контейнер для пунктов li, у которых порядок важен | <ol><li>Пункт</li></ol> |
Нумерованный список ol: чем отличается от ul |
<li> |
Пункт списка внутри ul, ol или menu: получает маркер или номер и может содержать текст, ссылки и вложенные списки | <ul><li>Пункт</li></ul> |
Тег li: что можно записать внутри списка |
<dl> |
Список определений: контейнер для групп «название и значение», внутри записывают dt и dd | <dl><dt>Цвет</dt><dd>Зелёный</dd></dl> |
Список определений dl: как устроены dl, dt и dd |
<dt> |
Термин в списке определений: название, к которому относится описание dd | <dt>Цвет</dt> |
Термин dt: как записать название в списке dl |
<dd> |
Описание термина в списке определений: значение или определение для названия dt | <dd>Зелёный</dd> |
Описание dd: когда использовать список определений вместо обычного списка |
<menu> |
Список команд (панель кнопок): выглядит как ul, но описывает действия, а не меню сайта | <menu><li>Копировать</li></menu> |
— |
8. Теги для форм
Без форм пользователь не может ничего отправить на сервер - ни логин, ни комментарий, ни заказ. Тег form объединяет поля в одну отправку, а input - самое универсальное поле ввода, тип которого меняется от текста до чекбокса и даты. Кнопку отправки задаёт button, подпись к полю - label, а выпадающий список - select с вариантами option внутри. Остальные теги группы (textarea, fieldset, datalist, progress и другие) решают более узкие задачи внутри той же формы. Тег selectedcontent экспериментальный и работает не во всех браузерах.
| Тег | Для чего нужен | Пример | Урок курса |
|---|---|---|---|
<form> |
Форма: объединяет поля, кнопки и надписи и отправляет их данные на сервер или скрипту | <form action="/send" method="post"><input name="q"></form> |
form и action |
<input> |
Поле ввода: вид задаёт атрибут type, от текстового поля и флажка до выбора даты, файла и кнопки | <input type="email" name="mail" required> |
Кнопка с содержимым в HTML: чем button отличается от input type=submit |
<button> |
Кнопка: отправляет форму, сбрасывает поля или запускает скрипт; внутри можно записать текст, значок и картинку | <button type="button">Показать</button> |
Тип кнопки в HTML по умолчанию: button без type |
<select> |
Выпадающий список: пользователь выбирает один или несколько вариантов, которые записаны тегами option | <select name="city"><option>Киев</option></select> |
Выпадающий список в HTML: select и option |
<option> |
Один вариант выбора внутри списка select, группы optgroup или подсказок datalist: текст для пользователя и value для сервера | <option value="r">Красный</option> |
Варианты списка в HTML: option и selected |
<optgroup> |
Группа вариантов внутри select: общий заголовок из label и возможность отключить сразу всю группу | <optgroup label="Фрукты">…</optgroup> |
— |
<selectedcontent> |
Экспериментальный тег, работает не во всех браузерах: показывает копию выбранного варианта option внутри кнопки настраиваемого select | <select><button><selectedcontent></selectedcontent></button>...</select> |
— |
<textarea> |
Многострочное поле ввода: текст хранится между тегами, размер задают rows и cols или CSS | <textarea name="msg" rows="4"></textarea> |
Многострочное поле в HTML: textarea |
<label> |
Надпись для поля формы: клик по ней переключает поле, а текст становится названием поля | <label for="email">Почта</label> |
label и его связь с полем |
<fieldset> |
Группа связанных полей формы с рамкой, заголовком и общим отключением через disabled | <fieldset disabled>…</fieldset> |
Группировка полей формы в HTML: тег fieldset |
<legend> |
Заголовок группы полей внутри fieldset, который становится названием группы | <legend>Получение</legend> |
Тег legend: заголовок группы полей |
<datalist> |
Список подсказок для поля ввода, который подключают через атрибут list | <datalist id="cities"> |
Как связать datalist с полем ввода |
<output> |
Результат вычисления или действия пользователя, который показывает скрипт | <output for="a b">5</output> |
— |
<progress> |
Полоса, которая показывает долю выполненной работы | <progress value="70" max="100"> |
Ход выполнения задачи: тег progress |
<meter> |
Шкала, которая показывает значение внутри известного диапазона | <meter value="0.7"> |
Шкала измерения: тег meter |
9. Мультимедиа и изображения
Картинки, видео и звук на странице выводят разные теги. img - самый частый, это простое изображение, а picture умеет подставлять разный вариант картинки под разные экраны. video и audio встраивают плеер силами самого браузера, без сторонних библиотек, а source задаёт для них конкретный файл. Отдельно стоит iframe: он встраивает не медиа, а целую чужую страницу, например карту или видео с другого сайта. canvas, map и area нужны реже - для рисования через JavaScript и кликабельных зон поверх картинки. Отдельно стоят svg и math: они встраивают в страницу векторную графику и формулы на своих языках разметки.
| Тег | Для чего нужен | Пример | Урок курса |
|---|---|---|---|
img | Выводит картинку на странице: адрес файла в src, описание в alt | <img src="kot.jpg" alt="Кот"> |
Тег img и атрибут src |
picture |
Контейнер, который выбирает файл картинки по формату и ширине окна | <picture><source ...><img ...></picture> |
— |
source |
Один вариант файла для video, audio или picture: адрес, формат, условия выбора | <source src="a.webm" type="video/webm"> |
— |
video |
Видео на странице с плеером: файл, кнопки управления, автозапуск, постер | <video src="film.webm" controls></video> |
Тег video: controls и poster |
audio |
Воспроизводит звук на странице: плеер, повтор, громкость, несколько форматов | <audio src="song.mp3" controls> |
Тег audio: controls и громкость |
track |
Подключает к video и audio текстовую дорожку: субтитры, главы, реплики | <track src="ru.vtt" kind="subtitles"> |
— |
iframe |
Встраивает содержимое другой страницы: карту, видео, виджет | <iframe src="https://example.com"></iframe> |
iframe и атрибут src |
embed |
Встраивает файл на страницу: PDF, картинку, SVG. Редкий тег: чаще берут object или iframe | <embed src="file.pdf"> |
— |
object |
Встраивает файл на страницу: SVG, PDF, картинку. Если файл не открылся, показывает запасное содержимое | <object data="file.pdf"></object> |
— |
canvas |
Создаёт холст, на котором скрипт рисует фигуры, текст, картинки, графики и анимацию | <canvas width="200" height="100"></canvas> |
— |
<svg> |
Встроенная векторная графика: рисунок из фигур, который не теряет чёткость при любом размере | <svg width="120" height="120" viewBox="0 0 120 120"><circle cx="60" cy="60" r="50" /></svg> |
— |
<math> |
Корневой тег формулы на языке MathML: браузер сам рисует дроби, степени, корни и знаки суммы | <math><mfrac><mn>1</mn><mn>2</mn></mfrac></math> |
— |
map |
Описывает карту-изображение: набор кликабельных областей на одной картинке. Области записывают тегами area | <map name="rooms">...</map> |
— |
area |
Описывает одну кликабельную область картинки-карты: прямоугольник, круг или многоугольник со своим адресом | <area shape="rect" coords="0,0,100,100" href="a.html" alt="A"> |
— |
10. Интерактивные и служебные теги
Эти теги добавляют интерактивность. Тег details вместе с summary создают раскрывающийся блок, похожий на аккордеон или спойлер, и работают без единой строки JavaScript. Тег dialog открывает модальное окно средствами браузера, но показать его нужно вызовом showModal(). template и slot используются реже: они хранят разметку про запас и подставляют пользовательский контент в веб-компоненты. Тег geolocation экспериментальный и работает не во всех браузерах.
| Тег | Для чего нужен | Пример | Урок курса |
|---|---|---|---|
<details> |
Раскрывающийся блок без JavaScript: спойлер, FAQ, аккордеон | <details><summary>Заголовок</summary>Текст</details> |
Раскрывающийся блок: details и summary |
<summary> |
Заголовок раскрывающегося блока: клик открывает и закрывает <details>, стрелку можно убрать или заменить |
<summary>Заголовок</summary> |
Раскрывающийся блок: details и summary |
<dialog> |
Окно поверх страницы: подтверждение, форма, сообщение, модальное или обычное | <dialog><p>Текст</p></dialog> |
Открыть модальное окно: showModal() |
<geolocation> |
Выводит кнопку браузера, по нажатию на которую страница получает доступ к местоположению | <geolocation autolocate><button>...</button></geolocation> |
— |
<template> |
Хранит разметку, которая не выводится на страницу, пока скрипт её не скопирует | <template><li>…</li></template> |
— |
<slot> |
Задаёт в теневом DOM место, куда выводится содержимое компонента, а без него показывает запасное | <slot name="title">Без названия</slot> |
— |
11. Устаревшие HTML-теги
Эти теги когда-то были частью HTML, но сегодня не используются: часть браузеров их ещё обрабатывает, часть игнорирует, а валидатор укажет на ошибку. Актуальные задачи решают другие теги или CSS. В таблице - чем заменить каждый из них.
| Тег | Что делал | Чем заменить | Урок курса |
|---|---|---|---|
<center> (не используется) |
Центрировал содержимое по горизонтали | CSS: text-align: center (текст) или margin: 0 auto (блок) | Что на самом деле центрирует text-align: center |
<font> (не используется) |
Задавал размер, цвет и шрифт текста | CSS: font-size, color, font-family | Размер шрифта и единицы измерения: px, em, rem |
<marquee> (не используется) | Прокручивал текст по экрану («бегущая строка») | CSS: @keyframes и transform: translateX() | Правило @keyframes: создаём анимацию с нуля |
<blink> (не используется) |
Заставлял текст мигать | CSS: @keyframes и animation со сменой opacity | Длительность и повтор: animation-duration и animation-iteration-count |
<acronym> (не используется) |
Отмечал аббревиатуру, читаемую как слово | Тег abbr с атрибутом title | Аббревиатуры и время: abbr и time |
<big> (не используется) | Увеличивал текст в 1,2 раза относительно родителя | Свойство font-size в CSS | Размер шрифта и единицы измерения: px, em, rem |
<strike> (не используется) |
Показывал текст зачёркнутым | Тег s, тег del или text-decoration: line-through в CSS | Зачёркнутое и подчёркнутое: s и u |
<tt> (не используется) |
Показывал текст моноширинным шрифтом | Теги code, kbd, samp, var или font-family: monospace в CSS | Код на странице: pre и code |
<frame> (не используется) |
Задавал одну панель набора frameset с отдельным документом | Тег <iframe> с теми же src и name |
— |
<frameset> (не используется) |
Делил документ на столбцы и строки (cols, rows) вместо body |
CSS grid и несколько <iframe> внутри обычного body |
— |
<noframes> (не используется) |
Хранил запасной текст для браузеров без поддержки фреймов | Обычная видимая ссылка рядом с <iframe> |
— |
<fencedframe> (не используется) |
Устаревший тег для рекламы: встраивает страницу так же, как iframe, но отрезает её от страницы, в которую он встроен | iframe | — |
<applet> (не используется) |
Встраивал Java-апплет на страницу и задавал размеры области для его отображения | Теги <object>, <iframe> и <canvas> вместо самой программы |
— |
<param> (не используется) |
Передавал встроенному объекту параметры в парах name и value внутри object | Атрибут data у object с адресом ресурса |
— |
<rb> (не используется) |
Отмечал основу в ruby: знак или слово, над которым пишут пояснение rt | Писать основу прямо внутри ruby, пояснение после неё в rt | — |
<rtc> (не используется) |
Хранил вторую аннотацию в ruby, например перевод рядом с произношением из rt | Вложенные ruby: внутренняя с первой rt, внешняя со второй | — |
<menuitem> (не используется) |
Задавал пункт контекстного меню внутри menu type="context" | menu со списком li и button, атрибут popover | — |
<image> (не используется) |
Ошибочно записывали вместо img: браузер сам заменяет его на img | img (внутри SVG остаётся настоящий image) | — |
<bgsound> (не используется) |
Включал фоновую музыку страницы, его придумали для Internet Explorer | audio с атрибутами loop и controls | — |
<keygen> (не используется) |
Создавал в форме пару ключей для сертификата | Web Cryptography API: crypto.subtle.generateKey() | — |
<multicol> (не используется) |
Разбивал текст на колонки, его придумали для Netscape | CSS: column-count, column-gap, column-rule | — |
<content> (не используется) |
Задавал место вставки содержимого в Shadow DOM первой версии | slot (Shadow DOM второй версии) | — |
<shadow> (не используется) |
Подставлял содержимое старого shadow root в Shadow DOM первой версии | slot и вложенные компоненты (Shadow DOM второй версии) | — |
<nextid> (не используется) |
Хранил в head номер следующего якоря для редактора страниц (HTML 2.0) | Атрибут id, слаг заголовка, GUID | — |
<basefont> (не используется) |
Задавал размер, цвет и тип шрифта для всего текста, расположенного после него | Свойства font-size, color и font-family у body |
— |
<dir> (не используется) |
Создавал список, например имён файлов каталога, а выглядел как обычный маркированный список | Тег <ul> с теми же пунктами <li>, плотность и маркер задаются в CSS |
— |
<isindex> (не используется) |
Выводил готовую строку поиска по документу с подсказкой и полем ввода | Форма <form> с полем <input> и кнопкой отправки |
— |
<listing> (не используется) |
Выводил листинг программы моноширинным шрифтом с сохранением строк | Тег <pre> с вложенным <code> для блока кода, один <code> для короткой записи |
— |
<nobr> (не используется) |
Запрещал браузеру переносить строки внутри себя, текст шёл одной строкой | Стиль white-space: nowrap у <span> или класса, неразрывные пробелы для коротких фрагментов |
— |
<noembed> (не используется) |
Хранил запасной текст для встроенного объекта, который задавали тегом <embed> |
Тег <object>, запасной текст пишется между его открывающим и закрывающим тегами |
— |
<plaintext> (не используется) |
Выводил весь текст после себя как есть, теги внутри были видны на экране, действие длилось до конца страницы | Тег <pre> с <code> и сущностями вместо знаков, а для целой страницы тип text/plain |
— |
<spacer> (не используется) |
Создавал пустое место между словами или блоками, вид и размер задавали атрибутами type, size, width и height |
Свойства CSS margin, padding и gap у самих элементов |
— |
<xmp> (не используется) |
Выводил код как простой текст моноширинным шрифтом, теги внутри были видны на экране, закрывающий тег обязателен | Теги <pre> и <code>, знаки <, > и & внутри пишутся сущностями |
— |