В уроке про выделение текста были strong, em и mark - но в HTML есть ещё несколько инлайн-тегов с не менее конкретным смыслом: <abbr> и <time> дают браузеру и поисковику "скрытую" расшифровку значения, <sub>/<sup> отвечают за типографское положение текста, <small> помечает мелкий побочный текст, а <del>/<ins> показывают, что именно поменялось в документе.
В этом уроке
Наведи курсор на API справа - появится расшифровка из title. Присмотрись и к остальному: у H2O цифра опущена вниз, у 210 - поднята вверх, старая цена зачёркнута, новая - подчёркнута, а нижняя строка мельче остального текста - и всё это браузер сделал сам, без единой строчки CSS.
Аббревиатуры и время: abbr и time
<abbr> помечает сокращение или аббревиатуру, а необязательный атрибут title может содержать её полную расшифровку - браузер покажет её всплывающей подсказкой при наведении. Но полагаться только на title не стоит: на сенсорных экранах и при навигации с клавиатуры подсказка обычно не появляется вовсе, а для читателя с экранным диктором разница между тем, что показано на экране, и тем, что озвучено, может сбивать с толку. Надёжнее один раз расшифровать сокращение прямо в тексте при первом употреблении. <time> решает похожую задачу для дат: атрибут datetime задаёт машиночитаемое значение в строгом формате (например, "2026-09-15"), даже если видимый текст написан по-другому ("15 сентября") - это то, что реально умеют читать поисковики и календарные приложения.
Работаем с <abbr title="JavaScript Object Notation">JSON</abbr> (JavaScript Object Notation) - расшифровка есть и в title, и в самом тексте.
Работаем с <abbr title="JavaScript Object Notation">JSON</abbr>. - расшифровка есть только в title: на телефоне или с клавиатуры читатель её не увидит и не услышит.
Индексы и степени: sub и sup
<sub> и <sup> сдвигают часть текста ниже или выше базовой линии - но, как прямо предупреждает MDN, использовать их стоит "только по типографским причинам", а не просто ради внешнего вида. Уместные случаи - химические формулы (H2O), показатели степени (210), сноски, порядковые обозначения. Если сдвиг текста нужен исключительно для оформления (например, часть логотипа), правильнее сделать это через CSS-свойство vertical-align, а не подменять смысл документа. Ещё один нюанс: sub и sup нельзя штатно применить к одному и тому же куску текста одновременно (например, для атомного номера и массового числа изотопа) - для таких сложных случаев в HTML предусмотрен отдельный язык разметки, MathML.
C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub> (кофеин) - типографски значимый сдвиг: индексы атомов в формуле.
<sup>Название</sup> <sub>компании</sub> - сдвиг ради визуального эффекта в логотипе, без типографского смысла - для этого нужен CSS, а не sub/sup.
Мелкий текст: small
В старых версиях HTML <small> означал просто "сделай текст мельче" - чисто визуальный эффект. HTML5 переопределил его смысл: теперь это побочный комментарий или мелкий печатный текст - копирайт, дисклеймер, юридическая оговорка, то есть содержимое, а не просто размер шрифта (похожая история уже была со strong/b и em/i в прошлом уроке). Если текст нужно визуально уменьшить, но по смыслу он не является такой сноской, правильнее задать это через CSS-свойство font-size, а не через <small>.
<p><small>© 2026, все права защищены.</small></p> - настоящая мелкая печать: копирайт в подвале страницы.
<small>Заголовок раздела</small> - тег использован просто чтобы уменьшить шрифт заголовка, без смысла "побочного примечания" - для этого нужен CSS.
Правки в тексте: del и ins
<del> и <ins> - парные теги для отслеживания правок: del помечает удалённый фрагмент документа, ins - добавленный. Браузер по умолчанию зачёркивает del и подчёркивает ins безо всякого CSS. У обоих тегов есть необязательные атрибуты cite (ссылка, поясняющая причину правки - например, обсуждение или тикет) и datetime (когда именно внесена правка) - они превращают простое зачёркивание в настоящую запись об изменении документа. Если зачёркивание нужно просто как визуальный эффект, никак не связанный с правкой документа (например, шутка про "перечёркнутую" цену без реального удаления информации), для этого в HTML есть отдельный тег - о нём в следующем уроке.
<del datetime="2026-09-01" cite="/changelog#opechatka">неправильная дата</del> <ins datetime="2026-09-01">правильная дата</ins> - настоящая правка документа, с датой и источником.
<del>999 руб.</del> <del>799 руб.</del> - оба варианта зачёркнуты, непонятно, что удалено, а что добавлено взамен.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Полагаться только на title у abbr, ожидая что все пользователи его увидят | На тачскринах и при навигации с клавиатуры title обычно не всплывает | Расшифровывать аббревиатуру в самом тексте при первом употреблении |
| Писать в time только текст без datetime, когда видимый формат не машиночитаемый | Поисковики и календарные приложения не смогут точно распознать дату | Добавлять datetime в стандартном формате (YYYY-MM-DD и похожих) |
| Использовать sub/sup ради визуального эффекта, а не типографского смысла | Путает смысл документа с оформлением | Для визуального сдвига текста использовать CSS vertical-align |
| Использовать small для любого текста, который просто хочется сделать мельче | У тега есть собственное значение (побочное примечание), а не просто "уменьши шрифт" | Для чисто визуального уменьшения шрифта использовать CSS font-size |
| Использовать del для декоративного зачёркивания, не связанного с правкой документа | Тег обозначает изменение содержимого документа, а не любое зачёркивание текста | Для зачёркивания без смысла правки использовать другой тег (см. следующий урок) |
Шпаргалка
| Тег | Смысл и особенности |
|---|---|
| <abbr> | Аббревиатура; title - расшифровка (не работает на тачскринах и с клавиатуры) |
| <time> | Дата/время; datetime - машиночитаемый формат для поисковиков и календарей |
| <sub> | Нижний индекс для типографского смысла (формулы, сноски) |
| <sup> | Верхний индекс - степени, сноски, порядковые обозначения |
| <small> | Мелкий шрифт как побочное примечание (копирайт, дисклеймер) - не просто "уменьшить текст" |
| <del> | Удалённый фрагмент документа (зачёркнут по умолчанию); cite/datetime - источник и время правки |
| <ins> | Добавленный фрагмент документа (подчёркнут по умолчанию); cite/datetime - источник и время правки |
Коротко: отвечаем на вопросы
Работает ли title у abbr на телефоне, без наведения мышью?
Как правило нет. Подсказка из title обычно не появляется ни при тапе по экрану, ни при переходе фокуса с клавиатуры - она рассчитана именно на наведение мышью. Поэтому title стоит считать дополнением, а не единственным способом объяснить сокращение - надёжнее расшифровать его прямо в тексте.
Обязательно ли указывать datetime у time, если дата и так написана текстом?
Не всегда. Если сам видимый текст уже написан в машиночитаемом формате, datetime можно не указывать. Но если текст выглядит иначе (например, "15 сентября" вместо "2026-09-15") или может быть понят неоднозначно, datetime нужен - именно он, а не оформление, даёт поисковикам и календарям точное значение.
Можно ли просто уменьшить шрифт через CSS вместо тега small?
Да, если текст не является по смыслу побочным примечанием вроде копирайта или дисклеймера - в этом случае small не подходит, и CSS-свойство font-size у обычного элемента будет правильнее. Тег small стоит использовать именно тогда, когда мелкий текст - это самостоятельная смысловая категория, а не просто желаемый размер шрифта.
Зачем нужны cite и datetime у del и ins, если можно просто зачеркнуть текст?
Простое зачёркивание ничего не говорит о том, когда и почему изменился документ. Атрибуты cite и datetime превращают del/ins в настоящую запись о правке: cite может ссылаться на обсуждение или тикет, объясняющий причину, а datetime фиксирует момент изменения - это то, что становится доступно программам и другим редакторам документа, а не только видно на глаз.
