Атрибут hidden тега <pre>

Описание

Атрибут hidden для тега <pre> позволяет скрыть блок предварительно форматированного текста. Это глобальный HTML-атрибут, который полностью удаляет элемент из визуального отображения страницы.

Пример использования:
<pre hidden> Этот текст не будет отображаться на странице, но останется в исходном коде. </pre>

Особенности работы:

Аспект Поведение
Отображение Полностью скрывает элемент (аналог CSS: display: none)
Доступность Скрывает элемент от скринридеров
Место в потоке Не занимает место в верстке

Сравнение с CSS display:none:

  • Аналогичный визуальный эффект
  • Более семантичное обозначение скрытого состояния
  • Не переопределяется большинством CSS-правил
  • Легко управляется через JavaScript

Пример динамического управления:

<pre id="toggle-pre"> Конфигурационный файл: debug = true log_level = "warn" </pre> <button onclick="togglePre()">Переключить видимость</button> <script> function togglePre() { const pre = document.getElementById('toggle-pre'); pre.hidden = !pre.hidden; } </script>

Рекомендации по использованию:

  • Используйте для временного скрытия конфигурационных данных
  • Не применяйте для важного контента - он станет недоступным
  • Для SEO-критичного контента используйте другие методы
  • Сочетайте с JavaScript для динамического отображения

Ограничения:

  • Не влияет на производительность - содержимое всё равно загружается
  • Не подходит для скрытия чувствительных данных (остаётся в HTML)
  • Для условного отображения лучше использовать CSS-классы

Примечание: Хотя атрибут hidden эффективен для простого скрытия элементов, для сложных сценариев отображения/скрытия контента предпочтительнее использовать CSS или JavaScript с более тонким контролем.