HTML <ins> Тег
Тег <ins> определяет фрагмент текста, вставленный в документ. Описание тега, атрибуты и примеры.
HTML-тег <ins> отмечает фрагмент текста, который был вставлен в документ. Это семантический редакторский элемент: он не просто подчёркивает текст, а фиксирует факт добавления. По умолчанию браузеры отображают содержимое с подчёркиванием, но это можно изменить с помощью CSS-свойства text-decoration.
<ins> почти всегда используется в паре со своим аналогом — тегом <del>, который отмечает удалённый текст. Вместе они описывают правку: что было убрано и что добавлено на замену. Именно такая информация необходима в:
- Журналах изменений и примечаниях к выпускам — для отображения того, что добавлено в новой версии.
- Юридических и договорных документах — для фиксации поправок без потери исходных формулировок.
- Отслеживании изменений / сравнении документов — «редлайн»-представление, привычное редакторам по текстовым процессорам.
Поскольку <ins> предназначен исключительно для разметки правки, при необходимости только визуального эффекта используйте другой элемент: <u> для стилизации нетекстовых аннотаций, <em> или <strong> для выделения, и <mark> для подсветки важного текста.
Синтаксис
Тег <ins> используется парами. Содержимое записывается между открывающим (<ins>) и закрывающим (</ins>) тегами.
<ins>This text was added.</ins>Пример HTML-тега <ins>:
HTML-тег <ins>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>She likes <del datetime="2023-01-01">violets</del> <ins datetime="2023-10-01">snowdrops</ins>.</p>
</body>
</html>Результат
Использование <ins> в паре с <del> для отображения различий в документе
Наиболее распространённое применение <ins> — отображение «редлайна» правки: старый текст зачёркнут, новый подчёркнут, оба расположены рядом. Содержимое <del> — удалённый фрагмент; содержимое <ins> — замена.
<!DOCTYPE html>
<html>
<head>
<title>Document diff</title>
</head>
<body>
<p>
The meeting is scheduled for
<del>Monday</del>
<ins>Wednesday</ins>
at
<del>9:00 AM</del>
<ins>10:30 AM</ins>.
</p>
</body>
</html>По умолчанию части <del> отображаются с зачёркиванием, а части <ins> — с подчёркиванием, так что читатель сразу видит, что изменилось.
Атрибуты cite и datetime
Оба тега <ins> и <del> принимают два атрибута, фиксирующие причину и время правки. Сами по себе они не создают видимого эффекта — это машиночитаемые метаданные, которые могут обрабатываться редакторскими инструментами и вспомогательными технологиями.
cite— URL, указывающий на документ (тикет, задачу, протокол совещания), объясняющий причину вставки.datetime— дата, и при необходимости время, когда текст был вставлен.
Значение datetime соответствует тому же формату, что и у тега <time>: YYYY-MM-DDThh:mm. Часть с датой (YYYY-MM-DD) обязательна; часть со временем — необязательна. Если указывается время, оно отделяется от даты буквой T, а также может включать секунды и смещение часового пояса (например, 2023-10-01T14:30:00Z).
<p>
Price:
<del datetime="2023-09-30" cite="/changelog#price-update">$49</del>
<ins datetime="2023-10-01T09:00" cite="/changelog#price-update">$59</ins>
</p>| Значение | Смысл |
|---|---|
2023-10-01 | Только дата — 1 октября 2023 г. |
2023-10-01T09:00 | Дата и местное время — 09:00 |
2023-10-01T09:00:00Z | Дата, время и часовой пояс UTC |
Оборачивание блочного содержимого
<ins> является прозрачным элементом содержимого: он может охватывать как строчный текст, так и целые блоки (потоковое содержимое) — абзацы и элементы списков, если окружающий контекст допускает такие блоки. Это позволяет пометить целый абзац или несколько пунктов списка как вновь добавленные.
<!DOCTYPE html>
<html>
<head>
<title>Inserted block</title>
</head>
<body>
<h2>Release 2.0 — what's new</h2>
<ins datetime="2023-10-01">
<p>Added dark mode and keyboard shortcuts.</p>
<ul>
<li>Press <kbd>?</kbd> to view all shortcuts.</li>
<li>Toggle the theme from the settings menu.</li>
</ul>
</ins>
</body>
</html>Стилизация и доступность
Большинство программ экранного чтения не объявляют <ins> и <del> по умолчанию, поэтому пользователь, работающий с аудио, может не заметить правку. Добавление aria-label к <ins> не является надёжным решением — aria-label не является стандартным для этого элемента, и поддержка непоследовательна.
Рекомендуемый подход — раскрывать правку через CSS-генерируемый контент с использованием псевдоэлементов ::before и ::after. Метка вставки становится частью отображаемого текста, который программы чтения с экрана могут озвучить, а визуальные стили сосредоточены в одном месте.
<!DOCTYPE html>
<html>
<head>
<title>Accessible ins styling</title>
<style>
ins {
background-color: #d4f7d4;
text-decoration: none;
border-bottom: 2px solid green;
}
ins::before {
content: " [inserted: ";
}
ins::after {
content: "] ";
}
</style>
</head>
<body>
<p>The deadline is <ins datetime="2023-10-01">next Friday</ins>.</p>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| cite | URL | Указывает URL документа, объясняющего причину вставки. |
| datetime | YYYY-MM-DDThh:mm | Определяет дату (и необязательное время) вставки. |
Тег <ins> также поддерживает глобальные атрибуты и атрибуты событий.
Связанные теги
<del>— отмечает удалённый текст (аналог<ins>).<s>— представляет содержимое, которое больше не является точным или актуальным (не правка).<mark>— выделяет текст для справки или по значимости.<u>— нетекстовое подчёркивание без редакторского смысла.