Тег ins (от английского inserted, «добавленный») отмечает фрагмент, который добавили в документ уже после того, как текст был написан: новую дату, исправленное число, дописанное предложение. По умолчанию браузер подчёркивает такой фрагмент. Тег парный, закрывающий обязателен, а два необязательных атрибута, cite и datetime, записывают причину и время правки.
По умолчанию ins выглядит так же, как u: разница только в смысле, а смысл читатель на странице не видит. Поэтому вся ценность тега в атрибутах, которые читают программы, и в паре с del: удалённое значение отмечают им, добавленное - ins.
<p>Вебинар пройдёт <ins>19 октября</ins>.</p>В этой статье
- Тег ins в HTML: что это и для чего нужен
- Атрибуты cite и datetime у тега ins: что записать и что читатель увидит
- Тег ins и u: чем добавление отличается от подчёркивания
- Тег ins вокруг абзацев, списков и таблиц: что допустимо
- Оформление тега ins в CSS: подчёркивание, цвет и фон
- Частые ошибки с тегом ins
Тег ins в HTML: что это и для чего нужен
Спецификация HTML описывает ins как добавление к документу. Тег можно записывать везде, где допустим строчный контент, а его содержимое подчиняется правилам родителя: внутри абзаца это текст и строчные теги, внутри блока - блочные. Такое свойство называют прозрачной моделью содержимого.
Для чего нужен ins: показать читателю, что именно изменилось в тексте. Так отмечают перенос даты, исправленную цену, дополнение в инструкции, новые пункты в журнале изменений. Обычно рядом записывают парный тег del с прежним значением, а ins - с новым. Об этой паре написано в уроке курса про del и ins.
В браузере ins - строчный элемент (display: inline) с подчёркиванием: в замере text-decoration-line равен underline, цвет линии совпадает с цветом текста, а вес и начертание не меняются. Выделение и копирование дают только текст, без пометок.
Тег ins встречается не только в правках. Некоторые рекламные сети, например Google AdSense, записывают код блока в ins, используя его как контейнер: такая запись не про изменение текста, и переделывать её не нужно. В своей разметке берите ins для правок.
Атрибуты cite и datetime у тега ins: что записать и что читатель увидит
Атрибут cite хранит адрес страницы с пояснением: обсуждения, задачи в трекере, записи в журнале изменений. Атрибут datetime хранит время правки. Оба атрибута читателю не видны, их видят скрипты и программы, которые разбирают разметку.
<ins datetime="2026-09-25" cite="/changelog#webinar">
19 октября
</ins>Формат datetime тот же, что у тега time: дата 2026-09-25 или дата со временем 2026-09-25T10:30, при необходимости с часовым поясом +03:00 или Z. Браузер значение не проверяет: в замере свойство dateTime вернуло строку «вчера» как есть, а cite у записи без атрибута вернуло пустую строку. Формат нужно проверять самому.
Показать дату читателю можно через CSS: правило ins::after { content: attr(datetime) } выводит значение атрибута рядом с текстом. Проверьте в кадре, введя свои значения.
Пример: datetime и cite у ins
Выберите или введите datetime и cite. Кадр показывает свойства элемента и проверяет формат по стандарту.
Тег ins и u: чем добавление отличается от подчёркивания
По умолчанию ins и u выглядят одинаково: в замере оба получили подчёркивание сплошной линией цвета текста. Разница в смысле. Тег ins говорит, что фрагмент добавлен, и несёт атрибуты cite и datetime. Тег u отмечает фрагмент нетекстовой пометкой, например ошибку в написании, и к правкам отношения не имеет.
| Признак | ins | u | span с подчёркиванием |
|---|---|---|---|
| Смысл | Добавленный текст | Пометка | Только вид |
cite и datetime | Есть | Нет | Нет |
| Парный тег | del | Нет | Нет |
| Когда брать | Правка в документе | Ошибка или пометка | Оформление без смысла |
Похожие теги нужны для других задач: подсветку найденного слова даёт mark, а зачёркнутое неактуальное - s. Если правка должна остаться в истории документа, берут пару del и ins.
Тег ins вокруг абзацев, списков и таблиц: что допустимо
Содержимое ins прозрачное, поэтому его можно записать вокруг блоков: <ins><p>Новый абзац</p></ins> допустимо. Подчёркивание в Chrome при этом доходит до текста внутри абзаца, хотя сам ins остаётся строчным. Стандарт советует не пересекать одним ins границы абзацев: несколько добавленных абзацев отмечают отдельными ins.
В списках стандарт советует записывать ins внутри li, а не вокруг самого li: парсер запись <ul><ins><li> оставляет как есть, но валидатор её отметит. В таблицах ins записывают внутри ячеек: между table и tr запись не допускается, и в замере браузер вынес ins перед таблицей.
Абзац внутри p не допускается и при наличии ins: в замере <p>a<ins><p>b</p></ins></p> превратилось в <p>a<ins></ins></p><p>b</p><p></p>. Проверьте записи в кадре.
Пример: как браузер разберёт ins
Выберите запись. Кадр показывает вашу разметку, разметку после разбора браузером и оценку по стандарту.
Оформление тега ins в CSS: подчёркивание, цвет и фон
Вид добавленного текста меняют свойствами text-decoration-color (цвет линии), text-underline-offset (расстояние до текста) и background (фон). Цвет и фон помогают отличить добавление от ссылки, которая тоже подчёркнута: внутри ссылки ins получает цвет ссылки и подчёркивание, и разницы не видно.
ins {
text-decoration-color: #0f7a70;
text-underline-offset: 3px;
background: #e6f3f1;
}Метки до и после текста добавляют псевдоэлементы ::before и ::after со свойством content. Такие метки видны на экране, но в выделение и копию не попадают: в замере в копии остался только текст правки. Поэтому метки подходят как подсказка читателю, а не как способ передать текст.
ins::before {
content: '[+ ';
}
ins::after {
content: ']';
}Пример: оформление ins
Выберите оформление. Кадр показывает применённые свойства и текст, который попадёт в копию.
Частые ошибки с тегом ins
Ошибки с этим тегом связаны с выбором вместо других тегов, с форматом даты и с вложенностью.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
ins ради подчёркивания: <ins>Акция</ins> | Тег сообщает, что текст добавлен, хотя правки не было | Для пометки взять u или CSS, для акцента - strong, em или mark |
ins без пары там, где правка заменяет текст | Читатель не видит, что убрано: новое значение появляется без прежнего | Записать пару: del с прежним значением и ins с новым |
Неверный формат: datetime="вчера" | Браузер значение принимает, а программа, читающая дату, его не поймёт | Записать дату по формату: 2026-09-25 или со временем |
Один ins через несколько абзацев | Стандарт не советует пересекать границы абзацев, разметка становится неясной | Отмечать каждый абзац своим ins |
ins вокруг li: <ul><ins><li> | Браузер запись оставляет, валидатор отмечает ошибку | Записать ins внутри li |
ins между table и tr | Браузер выносит ins перед таблицей | Записать ins внутри ячейки td |
Ожидание, что cite и datetime видны читателю | Атрибуты на странице не отображаются | Вывести значение через CSS attr() или скриптом |
ins внутри ссылки без своего стиля | Цвет ссылки и подчёркивание скрывают разницу | Задать ins фон или цвет линии |
