Атрибут hidden тега <del>
Описание
Атрибут hidden позволяет скрыть элемент <del> и его содержимое от отображения на странице. Это полезно, когда нужно временно убрать удалённый текст из видимой части документа, сохранив его в разметке.
<p>
Текущая версия текста:
<del hidden datetime="2025-11-30">старое содержимое</del>
новое содержимое
</p>
Особенности работы:
| Характеристика | Описание |
|---|---|
| Влияние на отображение | Полностью скрывает элемент (аналог display: none) |
| Доступность | Элемент недоступен для скринридеров |
| Совместимость | Поддерживается всеми современными браузерами |
| Синтаксис | Булевый атрибут (достаточно просто указать hidden) |
Практическое применение:
<div id="document-history">
<p>
<del hidden id="hidden-deletion" cite="changes.html#v2" datetime="2023-11-01">
Предыдущая версия этого абзаца
</del>
Новая версия текста документа
</p>
<button onclick="showHiddenChanges()">Показать скрытые изменения</button>
</div>
<script>
function showHiddenChanges() {
document.querySelectorAll('#document-history del[hidden]').forEach(del => {
del.hidden = false;
del.style.backgroundColor = '#fff3f3';
});
}
</script>
Рекомендации по использованию:
- Используйте для временного скрытия удалённого контента
- Сохраняйте атрибуты
datetimeиciteдля контекста - Не используйте для важной информации - она будет недоступна
- Для постоянного удаления контента лучше полностью убирать элемент
- Сочетайте с JavaScript для управления видимостью
Сравнение с CSS-скрытием:
| Метод | Преимущества | Недостатки |
|---|---|---|
Атрибут hidden |
Семантический, простой в использовании | Меньше контроля над стилями |
display: none |
Гибкость, возможность анимации | Требует CSS |
visibility: hidden |
Сохраняет пространство элемента | Элемент остаётся в DOM-потоке |
Пример с историей изменений:
<style>
.change-history {
border: 1px solid #eee;
padding: 10px;
margin-top: 20px;
}
.hidden-change {
opacity: 0.5;
background-color: #f9f9f9;
}
</style>
<article>
<p>Актуальный текст документа</p>
<div class="change-history">
<h4>История изменений:</h4>
<del hidden class="hidden-change" datetime="2025-10-15">
Версия от 15 октября 2025
</del>
<del hidden class="hidden-change" datetime="2025-09-01">
Первоначальная версия
</del>
</div>
<button onclick="toggleHistory()">Показать/скрыть историю</button>
</article>
<script>
function toggleHistory() {
document.querySelectorAll('.hidden-change').forEach(item => {
item.hidden = !item.hidden;
});
}
</script>
Примечание: Хотя атрибут hidden удобен для временного скрытия удалённого контента, помните, что такой контент остаётся в HTML-коде страницы и может быть обнаружен пользователями. Для конфиденциальной информации используйте серверную обработку вместо клиентского скрытия.