HTML-тег <del>

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

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

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

Основной синтаксис использования тега <del> :

<del>Deleted text</del>

Браузеры отображают текст внутри тега <del> перечеркнутым, что указывает на то, что он был удален.

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

cite: Указывает URL-адрес, который объясняет причину удаления или предоставляет дополнительный контекст.
datetime: Указывает дату и время удаления текста. Значение должно быть в допустимом формате datetime(например, YYYY-MM-DDThh:mm:ss ).

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

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

<!DOCTYPE html>
<html>
    <body>
        <h2>Basic Example</h2>
        <p>The price of the product was <del>$100</del>, but it is now <ins>$80</ins>.</p>
    </body>
</html>

Пояснение: В этом примере текст $100 помечен как удаленный с помощью тега <del> , тогда как обновленная цена $80 помечена как вставленная с помощью тега <ins> .

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

Вы можете добавить метаданные к тегу <del> используя атрибуты cite и datetime :

<!DOCTYPE html>
<html>
    <body>
        <h2>Example with Attributes</h2>
        <p>The article was updated. The previous title was: <del cite="https://example.com/changes" datetime="2024-12-10T10:00:00">How to Learn HTML</del>.</p>
    </body>
</html>

Объяснение: атрибут cite предоставляет URL-адрес, объясняющий причину удаления текста, а атрибут datetime указывает, когда произошло изменение.

Оформление тега <del> с помощью CSS

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

<!DOCTYPE html>
<html>
    <head>
        <style>
            del {
                color: red;
                text-decoration: line-through;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h2>Styled <del> Example</h2>
        <p>This item was previously priced at <del>$150</del>.</p>
    </body>
</html>

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

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

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

Особые случаи для HTML-тега <del>

1. Объединение тега <del> с JavaScript

Вы можете динамически обновлять или изменять тег <del> с помощью JavaScript:

<!DOCTYPE html>
<html>
    <body>
        <h2>Dynamic Update Example</h2>
        <p>This item was <del id="oldPrice">$200</del> but is now $150.</p>

        <script>
            const delTag = document.getElementById("oldPrice");
            delTag.setAttribute("datetime", new Date().toISOString());
            delTag.setAttribute("cite", "https://example.com/price-changes");
        </script>
    </body>
</html>

Пояснение: Скрипт динамически добавляет атрибуты datetime и cite к тегу <del> , делая его более информативным.