HTML-тег <ins>

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

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

Базовый синтаксис HTML-тега <ins>

Базовая структура тега <ins> : 

<ins>Inserted text</ins>

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

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

  • cite: Указывает источник вставки, обычно URL или справочный документ.
  • datetime: Указывает дату и время вставки текста в формате YYYY-MM-DDThh:mm:ss .
  • Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class , style и title .
  • Атрибуты событий: поддерживает такие атрибуты событий, как onclick , onmouseover и onfocus .

Базовый пример HTML-тега <ins>

Вот пример использования тега <ins> для обозначения добавленного текста: 

<!DOCTYPE html>
<html>
    <body>
        <p>The updated document states: <ins>This policy is now effective immediately.</ins></p>
    </body>
</html>

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

Использование атрибутов с тегом <ins>

Вы можете включить дополнительные метаданные, используя атрибуты cite и datetime : 

<!DOCTYPE html>
<html>
    <body>
        <p>The updated terms include: 
            <ins cite="https://www.example.com/terms" datetime="2024-12-10T10:30:00">
                Additional clauses about data usage.
            </ins>
        </p>
    </body>
</html>

Пояснение: Атрибут cite указывает на источник вставки, а атрибут datetime указывает, когда текст был добавлен.

Стилизация тега <ins> с помощью CSS

Вы можете настроить внешний вид тега <ins> с помощью CSS: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            ins {
                color: green;
                text-decoration: none;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <p>The updated statement includes: 
            <ins>All team members are required to attend the meeting.</ins>
        </p>
    </body>
</html>

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

Совместное использование <ins> и <del>

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

<!DOCTYPE html>
<html>
    <body>
        <p>The document was revised to say: 
            <del>The meeting is postponed.</del> 
            <ins>The meeting is scheduled for tomorrow.</ins>
        </p>
    </body>
</html>

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

Практическое применение тега <ins>

  • Редактирование документов: отслеживание изменений в средах совместного редактирования.
  • Контроль версий: отображение добавленного контента в обновленных версиях документа.
  • Юридические тексты: выделите изменения в контрактах, политиках или условиях.
  • Обновления веб-контента: отметьте недавно добавленный контент на веб-странице.