<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>
.
Актуальность
Тег <ins>
актуален и используется в разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023