Теги <del> и <ins> в HTML предназначены для обозначения удаленных и вставленных изменений соответственно.

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

Тег <del> - Удаленные изменения

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

<p>Было: <del>Старый текст</del>. Стало: Новый текст.</p>

Этот код создает следующий вывод:

Тег <ins> - Вставленные изменения

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

<p>Было: Старый текст. Стало: <ins>Новый текст</ins>.</p>

Этот код создает следующий вывод:

Атрибут datetime

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

<p>Исправлено опечатку: <del datetime="2023-01-20T12:00:00">recevied</del><ins datetime="2023-01-20T12:01:00">received</ins> новое письмо.</p>

Сочетание тегов

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

<p>Было: <del>Устаревший текст</del>. Стало: <ins>Актуальный текст</ins>.</p>

Стилизация и CSS

Вы можете использовать CSS для стилизации текста, помеченного тегами <del> и <ins>, чтобы сделать изменения более заметными на странице.

del {
text-decoration: line-through;
color: red;
}
ins {
text-decoration: underline;
color: green;
}

Заключение

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