Атрибут hidden тега <ins>
Описание
Атрибут hidden скрывает элемент <ins> и его содержимое от отображения в браузере. Это булевый атрибут - его наличие (без значения) скрывает элемент.
<p>
Этот текст виден, а
<ins hidden>это добавление скрыто</ins>
</p>
<!-- Альтернативные формы записи -->
<ins hidden="hidden">Скрытое изменение</ins>
<ins hidden="true">Тоже скрыто</ins>
Особенности работы:
| Состояние | Описание | Как задать |
|---|---|---|
| Скрыто | Элемент не отображается | <ins hidden> |
| Видимо | Элемент отображается (по умолчанию) | <ins> (без атрибута) |
Пример с динамическим управлением:
<p>
История изменений:
<ins id="change-note">Добавлен новый раздел</ins>
</p>
<button onclick="toggleVisibility()">Переключить видимость</button>
<script>
function toggleVisibility() {
const note = document.getElementById('change-note');
note.hidden = !note.hidden;
}
</script>
Рекомендации:
- Используйте для временного скрытия неактуальных правок
- Не заменяет удаление контента (
<del>) - Для сложных сценариев используйте CSS
display: none - Скрытый контент остаётся в DOM и может быть доступен для скринридеров
Пример с CSS-переопределением:
<style>
.show-hidden [hidden] {
display: block !important;
opacity: 0.5;
}
</style>
<div class="show-hidden">
<p>
Режим просмотра правок:
<ins hidden>Скрытое изменение 1</ins>
<ins>Видимое изменение</ins>
<ins hidden>Скрытое изменение 2</ins>
</p>
</div>
Ограничения:
- Не поддерживается в IE10 и ниже
- Может конфликтовать с CSS
display - Скрытый контент может индексироваться поисковиками
- Не подходит для чувствительной информации (используйте JS удаление)
Примечание: Атрибут hidden полезен для временного скрытия информации, но не должен использоваться для сокрытия важного контента от пользователей. Для постоянного удаления информации используйте серверную обработку.