<ins>

25 января 2023

Тег <ins> определяет текст, который вставлен в документ. По умолчанию вложенный текст отображается подчёркнутым.

Синтаксис тега <ins>

<ins>Вставленный текст</ins>

Спецификация HTML

Тег <ins> является частью спецификации HTML Living Standard.

Семантический или нет

Тег <ins> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Выделение вставленного текста:

<p>Цена на яблоки <ins>увеличилась</ins> на этой неделе.</p>

Тег <ins> можно использовать для указания изменений в документе. Вместе с ним используется тег <del>, чтобы показать удалённый текст:

<p>Версия 2.0 этого документа включает следующие изменения:</p>

<ul>
  <li><ins>Новый раздел о лучших практиках</ins></li>
  <li><del>Удалена устаревшая статистика</del></li>
</ul>

Тег <ins> может использоваться с JavaScript, чтобы реализовать функцию совместного редактирования. Это помогает пользователям увидеть, какие изменения внесены в общий документ:

<div id="document-content">>
  <p>Быстрая коричневая лиса перепрыгивает через ленивую собаку.</p>
</div>

<script>
  // Simulate insertion of text at index 16
  var index = 16;
  var content = document.getElementById("document-content");
  content.innerHTML = content.innerHTML.slice(0, index) + '<ins>red</ins>' + content.innerHTML.slice(index);
</script>

Тег <ins> можно использовать для указания изменений в коде или языках программирования:

<p>Приведённая ниже функция <ins>JavaScript</ins> выводит текущую дату и время:</p>

<pre>
<code><ins>function</ins> displayDateTime() {
  <ins>var</ins> now = <ins>new</ins> Date();
  console.log(now.toLocaleString());
}</code>
</pre>

Тег <ins> можно использовать для визуального подчёркивания текста, например, для заголовков или названий:

<h2><ins>Мои любимые фильмы</ins></h2>

Тег <ins> можно использовать для поддержания обратной связи с пользователями, например, показать, что поле формы изменилось:

<input type="text" value="John Doe" onchange="this.style.border = '2px solid green';"><ins>Changed</ins>

С помощью тега можно улучшить доступность документа, указав, где добавлен текст:

<p>Эта политика вступает в силу <ins>сразу</ins> и заменяет все предыдущие политики.

Для чего использовать тег <ins>

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

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

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

datetime — дата и время вставки текста.

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

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег следует использовать редко и только для указания явных изменений в документе. Если <ins> использовать часто, это приведёт к загромождению и запутыванию макета, а также может негативно повлиять на доступность.

Нюансы

Если тег <ins> используется в гиперссылке, он примет оформление текста гиперссылки.

Поддержка браузерами

Тег поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.

Альтернативные теги

Тег <u> тоже может использоваться для подчёркивания текста, но он не передаёт то же значение вставленного текста, что и тег <ins>.

Чем заменить тег

Тег <ins> можно заменить альтернативными тегами, такими как <strong> или <em>, или использовать CSS для подчёркивания текста. Однако эти альтернативы могут не передавать то же значение вставленного текста, что и тег <ins>.