Тег ins в HTML

Главная

База знаний

html

Форматирование текста

Тег ins в HTML

26 ноября 2025

Автор

Олег Марков

Введение

Тег ins в HTML используется для семантического обозначения добавленного контента. Он говорит браузерам, поисковым системам и вспомогательным технологиям не просто о том, как текст должен выглядеть, а о том, что этот текст был добавлен по сравнению с предыдущей версией документа.

Вы можете визуально показывать добавления как угодно через CSS, но именно тег ins несет смысловую нагрузку. Это особенно важно, если вы:

делаете страницу с историей правок или юридическими изменениями;
показываете изменения в договоре, политике конфиденциальности, правилах сервиса;
реализуете систему сравнения версий текста;
хотите, чтобы изменения были корректно поняты скринридерами и поисковиками.

Давайте разберемся, как работает тег ins, какие атрибуты он поддерживает, как его стилизовать и когда имеет смысл его использовать.

Что такое тег ins и зачем он нужен

Семантика тега ins

Тег ins (от “inserted” — вставленный) обозначает фрагмент контента, который был добавлен в документ. Ключевой момент: он описывает изменение, а не просто «подчеркнутый» или «выделенный» текст.

Браузеры по умолчанию часто отображают ins как подчеркнутый текст, но это всего лишь стандартный стиль, который вы можете изменить через CSS. Семантика при этом остается: это добавленный фрагмент.

Смотрите, я покажу вам базовый пример:

<p>
  Текущая версия договора
  <ins>вступает в силу с 1 января 2025 года</ins>.
</p>

// Здесь мы явно указываем - этот фрагмент был добавлен в текущей версии документа

Для противоположной операции — удаления контента — существует тег del. Обычно они используются вместе, чтобы показать, что именно удалено и что добавлено взамен.

Отличие ins от просто оформления через CSS

Вы можете сказать: «Зачем мне ins, если я могу просто сделать текст с подчеркиванием через CSS?». Разница в том, что:

CSS меняет только внешний вид;
ins добавляет смысл текста в структуру документа.

Например:

<!-- Вариант без семантики -->
<p>
  Текущая версия договора
  <span class="added">вступает в силу с 1 января 2025 года</span>.
</p>

<!-- Вариант с семантикой -->
<p>
  Текущая версия договора
  <ins>вступает в силу с 1 января 2025 года</ins>.
</p>

// В первом случае класс added известен только вам и вашему CSS // Во втором случае тег ins понятен любому парсеру HTML и вспомогательным технологиям

Поисковые системы, дифф‑инструменты и скринридеры могут использовать информацию о ins, чтобы лучше интерпретировать изменения документа, а не просто визуальное оформление.

Синтаксис и допустимый контент внутри ins

Базовый синтаксис

Структура у тега ins простая:

<ins>Новый добавленный текст</ins>

// Это парный тег - у него есть открывающий и закрывающий теги // Всё, что между ними - считается добавленным содержимым

Тег ins — строчно-блочный (phrasing/flow content) элемент: он может использоваться и внутри текста абзаца, и как самостоятельный блок, в зависимости от контекста.

Что можно вкладывать в ins

По стандарту HTML тег ins может содержать потоковый контент (flow content). Проще говоря, вы можете поместить внутрь ins:

обычный текст;
строчные элементы (span, strong, a, em и т.д.);
блочные элементы (p, div, ul, ol, table и т.д.), если это уместно по структуре.

Давайте разберемся на примере более сложной разметки:

<ins>
  <p>
    В текущую редакцию договора добавлен следующий раздел
  </p>
  <ul>
    <li>Права и обязанности сторон</li>
    <li>Порядок расторжения договора</li>
  </ul>
</ins>

// Здесь мы показываем что целый фрагмент документа (абзац и список) - новый

Однако не забывайте про читаемость кода. Если у вас огромный блок обернут в ins, может быть полезно разделить его на логические части или использовать ins точечно.

Где можно использовать ins

Вы можете размещать ins:

внутри абзацев;
в заголовках;
внутри списков;
внутри таблиц;
как самостоятельный блок с любым содержимым.

Пример в заголовке:

<h2>
  Условия
  <ins>2025 года</ins>
</h2>

// Мы явно показываем что уточнение "2025 года" - новое в этом заголовке

Атрибуты тега ins

У тега ins есть два специальных атрибута, которые несут дополнительную семантическую информацию:

cite — ссылка на ресурс с описанием изменения;
datetime — время, когда изменение было внесено.

Кроме них ins также поддерживает глобальные атрибуты, такие как id, class, style, title и другие.

Атрибут datetime

Атрибут datetime позволяет указать момент времени, когда изменение было внесено. Это полезно для систем версионирования, юридических документов, журналов изменений.

Формат — строка в формате даты и времени, совместимая с стандартом ISO 8601. Простейший и самый понятный формат:

YYYY-MM-DD — только дата;
YYYY-MM-DDThh:mm:ssZ — дата и время по UTC;
YYYY-MM-DDThh:mm:ss+03:00 — дата и время с указанием временной зоны.

Пример:

<p>
  Настоящие условия
  <ins datetime="2025-01-01">
    вступают в силу с 1 января 2025 года
  </ins>.
</p>

// Атрибут datetime говорит - этот фрагмент добавлен 1 января 2025 года // Браузер не обязан что-то отображать по этому поводу - но информация доступна скриптам и парсерам

И еще пример с указанием времени и зоны:

<ins datetime="2025-01-01T10:00:00+03:00">
  Текст был добавлен после согласования с юридическим отделом
</ins>

// Здесь мы фиксируем точное время внесения правки с учетом часового пояса

Атрибут cite

Атрибут cite содержит URL‑адрес документа, описывающего причину или источник изменения. Это может быть:

страница с протоколом правок;
ссылка на задачу в системе трекинга (Jira, YouTrack и т.п.);
ссылка на pull request или commit в системе контроля версий;
отдельная HTML‑страница с историей изменений.

Смотрите, я покажу вам пример:

<p>
  В раздел о персональных данных добавлена новая формулировка
  <ins
    datetime="2025-01-01"
    cite="https://example.com/docs/privacy-changes-2025"
  >
    Сбор и обработка данных осуществляется только с согласия пользователя
  </ins>.
</p>

// Атрибут cite указывает на веб-страницу где можно прочитать детали изменения // Это полезно для юридических отделов и систем аудита

Важно: атрибут cite не превращает текст в ссылку. Если вы хотите, чтобы пользователь мог перейти по этому адресу, вам нужно явно добавить тег a:

<ins datetime="2025-01-01"
     cite="https://example.com/docs/changes/42">
  Новая редакция доступна в
  <a href="https://example.com/docs/changes/42">
    журнале изменений
  </a>
</ins>

// Атрибут cite здесь - технический, а тег a - уже кликабельная ссылка для пользователя

Глобальные атрибуты

Вы можете использовать любые глобальные атрибуты HTML с ins:

<p>
  Актуальная цена
  <ins class="price-change" id="new-price">
    2990 ₽
  </ins>.
</p>

// class пригодится для CSS-стилей // id - если нужно ссылаться на этот фрагмент из JS или якорной ссылкой

Визуальное оформление и стилизация ins

Поведение по умолчанию в браузерах

Большинство браузеров по умолчанию отображают тег ins как подчеркнутый текст. Это поведение похоже на текст с text-decoration: underline;, но не всегда полностью совпадает (детали зависят от браузера).

Если вы используете ins только для семантики, а внешний вид хотите контролировать сами, вам стоит явно задать стили.

Базовая стилизация ins

Теперь вы увидите, как это выглядит в коде:

<style>
  ins {
    background-color: #e6ffed; /* Мягкая подсветка фона */
    text-decoration: none;     /* Убираем стандартное подчеркивание */
  }
</style>

<p>
  В новую версию договора
  <ins>добавлен раздел о возврате средств</ins>.
</p>

// Здесь мы делаем добавленный текст подсвеченным зеленоватым фоном // Подчеркивание отключаем, чтобы визуально отделить от обычных ссылок

Вы можете использовать любой стиль, который помогает пользователю понять, что это новая часть текста:

фон;
рамка;
цвет текста;
анимация появления;

Главное — не перегружать интерфейс и сохранять читаемость.

Стилизуем ins и del вместе

На практике ins почти всегда используется вместе с del. Давайте посмотрим, что происходит в следующем примере:

<style>
  del {
    background-color: #ffecec;   /* Красноватый фон для удаленного текста */
    color: #a33;                 /* Блеклый красный текст */
    text-decoration: line-through; /* Зачеркивание */
  }

  ins {
    background-color: #e6ffed; /* Зеленоватый фон для добавленного текста */
    color: #22863a;            /* Более насыщенный зеленый текст */
    text-decoration: none;     /* Без подчеркивания */
  }
</style>

<p>
  Срок действия договора
  <del>12 месяцев</del>
  <ins>24 месяца</ins>.
</p>

// del показывает что было раньше и теперь удалено // ins показывает актуальное значение после изменения

Такой подход делает изменения наглядными и удобными для визуального анализа.

Подсветка изменений на странице

Иногда нужно временно подсветить изменения пользователю, а затем убрать подсветку (например, после прочтения). В этом случае можно комбинировать ins с классами и JavaScript.

Покажу вам, как это реализовано на практике:

<style>
  ins.highlight {
    background-color: yellow; /* Яркая подсветка для свежих изменений */
    transition: background-color 1s; /* Плавное исчезновение подсветки */
  }
</style>

<p>
  Новые условия доставки
  <ins class="highlight" id="new-delivery-terms">
    включают бесплатную курьерскую доставку по городу
  </ins>.
</p>

<script>
// Через 3 секунды уменьшаем заметность подсветки
setTimeout(function () {
  var el = document.getElementById('new-delivery-terms');
  if (el) {
    el.style.backgroundColor = '#e6ffed'; // Меняем фон на более мягкий
  }
}, 3000);
</script>

// Здесь мы сначала выделяем изменения ярко // Потом автоматически переключаем на менее агрессивный фон чтобы не мешать чтению

Взаимодействие ins с del и другими тегами

Логическая пара ins и del

Тег ins сам по себе полезен, но максимальный смысл появляется, когда вы используете его в паре с del. Вместе они описывают изменение «до / после»:

<p>
  Размер скидки изменен с
  <del>5%</del>
  на
  <ins>10%</ins>.
</p>

// del - что было // ins - что стало

Если вы реализуете систему сравнения версий текста (например, разницу между двумя версиями договора), связка ins + del — естественный и семантически корректный инструмент.

Вложенность ins и del

Спецификация не запрещает вкладывать ins и del друг в друга, но в реальной разметке это почти всегда усложняет восприятие и читателю, и разработчику.

Лучше стараться:

не пересекать области ins и del;
выделять изменения на уровне фраз, а не отдельных букв, если это возможно.

Корректный пример:

<p>
  Способ доставки изменен с
  <del>самовывоза</del>
  на
  <ins>курьерскую доставку</ins>.
</p>

// Каждый тег отвечает за одну законченную смысловую единицу // Это проще для анализа и человеком и программой

Нежелательный пример (мелкая, трудно читаемая дифф‑разметка):

<p>
  Способ доставки
  <del>сам</del><ins>курьер</ins>овывоз.
</p>

// Формально это возможно // Но человеку читать такой «символьный дифф» крайне неудобно

Использование ins в реальных сценариях

История изменений документа

Один из самых очевидных сценариев — отображение истории обновлений документа. Например, политика конфиденциальности:

<h3>Обработка персональных данных</h3>

<p>
  <del datetime="2024-01-01">
    Мы можем передавать ваши данные третьим лицам для аналитики.
  </del>
</p>

<p>
  <ins datetime="2025-01-01">
    Мы не передаем ваши персональные данные третьим лицам,
    за исключением случаев, предусмотренных законом.
  </ins>
</p>

// Старый текст помечен как удаленный с датой // Новый текст - как добавленный с новой датой

Такой подход полезен:

пользователям — они видят, что конкретно поменялось;
юристам — есть формальная фиксация изменений;
автоматическим системам — можно парсить даты и изменения программно.

Сравнение двух версий текста

Представьте, что у вас есть веб‑интерфейс для сравнения двух версий статьи или технической документации. Вы можете автоматически сгенерировать HTML с ins и del, чтобы показать различия.

Упрощенный пример:

<p>
  Сервис предоставляет
  <del>доступ к архиву документов</del>
  <ins>онлайн-доступ к архиву документов и инструментам поиска</ins>
  через личный кабинет.
</p>

// Здесь разница сразу понятна без дополнительных пояснений // Пользователь видит что именно изменилось в формулировке

Такая разметка может быть результатом работы алгоритма, который сравнивает две строки и оборачивает отличающиеся фрагменты в del и ins.

Юридические и договорные изменения

В юридических документах важны не только текущие формулировки, но и история изменений. Тег ins здесь особенно уместен:

<p>
  <strong>Пункт 3.1</strong>
  <br>
  <del datetime="2024-03-01">
    Исполнитель обязуется предоставлять услуги не реже одного раза в месяц.
  </del>
  <br>
  <ins datetime="2025-01-15">
    Исполнитель обязуется предоставлять услуги не реже двух раз в месяц.
  </ins>
</p>

// Мы явно фиксируем - когда именно изменился пункт договора // Это может быть важно при разборе спорных ситуаций

Интерфейсы с «новыми» возможностями и пометкой NEW

Если на сайте появляется новая функция, вы можете использовать ins для семантики, а сверху добавить визуальный ярлык.

Давайте разберемся на примере:

<style>
  .feature-new ins {
    background-color: #e6ffed;  /* Мягкая подсветка */
    border-radius: 3px;
    padding: 0 2px;
  }

  .badge-new {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 4px;
    background-color: #ffcc00;
    font-size: 10px;
    text-transform: uppercase;
  }
</style>

<p class="feature-new">
  <ins datetime="2025-02-01">
    Поддержка двухфакторной аутентификации
  </ins>
  <span class="badge-new">New</span>
</p>

// Семантика добавленного текста задается через ins // Визуальное оформление делаем через CSS и небольшой бейдж

Локализация и обновление переводов

При обновлении локализованных версий сайта вам может понадобиться показать переводчикам или редакторам, какие фрагменты были добавлены.

Пример для перевода интерфейса:

<p>
  <ins datetime="2025-03-10">
    Для завершения регистрации подтвердите ваш адрес электронной почты
  </ins>
</p>

// Такой фрагмент может быть автоматически выделен в системе локализации // Переводчики видят что это новый текст а не измененный старый

Доступность и взаимодействие со скринридерами

Как скринридеры воспринимают ins

Поддержка ins и del вспомогательными технологиями есть, но поведение может отличаться в зависимости от устройства и настроек пользователя. Некоторые скринридеры:

могут озвучивать, что фрагмент «добавлен» или «вставлен»;
могут игнорировать семантику, если пользователь отключил такие сообщения.

При этом само наличие ins не ухудшает доступность. Напротив, это дополнительная семантическая подсказка.

Использование ARIA‑атрибутов

Для очень сложных интерфейсов можно комбинировать ins с ARIA‑атрибутами. Например, в интерактивных списках изменений:

<li aria-live="polite">
  <ins datetime="2025-02-10">
    Добавлен новый способ оплаты через банковскую карту
  </ins>
</li>

// aria-live подсказывает скринридеру обратить внимание на изменения в этом элементе // Это актуально для динамически обновляемых списков (например лента изменений)

Взаимодействие с JavaScript и динамическими изменениями

Динамическое добавление ins

Если вы делаете систему визуального сравнения версий или показываете свежие изменения сразу на странице, ins удобно создавать динамически через JavaScript.

Простейший пример — подсветить недавно добавленный текст:

<p id="terms">
  Условия обслуживания будут обновлены.
</p>

<script>
// Находим элемент с текстом условий
var terms = document.getElementById('terms');

// Создаем тег ins
var insElement = document.createElement('ins');
// Добавляем содержимое
insElement.textContent = ' Новые условия вступят в силу 1 марта 2025 года.';
// Указываем дату добавления
insElement.setAttribute('datetime', '2025-02-15');

// Добавляем ins в конец абзаца
terms.appendChild(insElement);
</script>

// Здесь мы программно создаем ins и добавляем его к существующему тексту // Такой подход полезен когда изменения формируются на стороне клиента

Автоматическое формирование diff‑разметки

В реальных проектах различия между версиями текста часто вычисляются на стороне сервера или в отдельной библиотеке. Результатом может быть HTML‑фрагмент с ins и del.

Упрощенный пример (концептуально, без конкретного алгоритма сравнения):

// Предыдущий текст и новый текст
var oldText = 'Скидка действует до 31 декабря 2024 года.';
var newText = 'Скидка действует до 31 января 2025 года.';

// Функция diffText должна вычислить различия
// и вернуть HTML с тегами del и ins
var diffHtml = diffText(oldText, newText);

// Вставляем результат в контейнер
document.getElementById('diff-container').innerHTML = diffHtml;

<div id="diff-container">
  <!-- Здесь будет HTML с del и ins, сгенерированный diffText -->
</div>

// В реальной жизни diffText можно взять из готовой библиотеки // Важно что результатом будет валидный HTML где добавления отмечены ins

Даже если вы не пишете алгоритм сравнения сами, полезно понимать, почему многие библиотеки используют именно ins и del — это стандартный и ожидаемый способ описать изменения в HTML.

Заключение

Тег ins в HTML — это семантический инструмент для обозначения добавленного контента. Он не просто подчеркивает текст, а сообщает: «этот фрагмент появился по сравнению с предыдущей версией документа».

Ключевые моменты, которые важно помнить:

ins используется для новых фрагментов, а del — для удаленных;
атрибуты datetime и cite помогают формализовать изменения — указать дату и источник;
визуальное оформление всегда делается через CSS, а не ради самого ins;
в юридических текстах, журналах изменений и системах diff‑сравнения ins дает понятную и стандартизированную разметку;
комбинация ins с хорошей стилизацией и продуманной структурой делает изменения понятными и людям, и программам.

Используя ins осознанно, вы делаете документацию и интерфейсы более прозрачными, предсказуемыми и удобными для анализа.

Частозадаваемые технические вопросы по тегу ins

Как корректно валидировать формат datetime для ins

Используйте формат года-месяца-дня и при необходимости времени по стандарту ISO 8601. Пример:

<ins datetime="2025-01-15T10:30:00+03:00">Новый текст</ins>

// Всегда начинайте с года // Для одной только даты используйте формат 2025-01-15 без времени

Можно ли использовать ins внутри тега a и не нарушит ли это кликабельность

Да, можно. Важно, чтобы структура была корректной и ins не разрывал сам тег ссылки:

<a href="/terms">
  Условия
  <ins>2025 года</ins>
</a>

// Вся область включая ins остается кликабельной // Старайтесь не вставлять внутрь ссылки блочные элементы если это нарушает дизайн

Как скрыть старые изменения с del оставив только новые с ins

Вы можете скрыть del через CSS:

del {
  display: none; /* Полностью скрываем удаленный текст */
}

// Так на странице останется только актуальный текст внутри ins // История изменений будет все еще доступна в исходном HTML

Есть ли смысл использовать ins в JSON или других форматах кроме HTML

Нет. ins — это HTML‑тег, он не предназначен для JSON или XML. Для описания изменений в данных лучше использовать:

отдельные поля для старого и нового значения;
структуры diff‑формата (например, списки операций добавления/удаления).

// ins полезен только там где вы рендерите HTML и хотите показать изменения в тексте

Можно ли менять содержимое внутри ins через JavaScript без пересоздания тега

Да, содержимое ins — такой же DOM‑узел, как и любой другой:

var el = document.querySelector('ins');
el.textContent = 'Обновленный добавленный текст';
// При необходимости можно обновить и дату изменения
el.setAttribute('datetime', '2025-04-01');

// Тег ins при этом сохраняется // Вы просто меняете его содержимое и метаданные о дате изменения