Атрибут hidden: скрыть элемент

Скрывает элемент из отображения и из дерева доступности одним атрибутом.

Уровень: начальный 10 разделов 6 минут

1. Что это и зачем

Скрывает элемент из отображения и из дерева доступности одним атрибутом.

Атрибут добавляет тегу данные и поведение: имя задаёт свойство, а значение — его параметр. Браузер читает атрибут на этапе разбора HTML и сразу применяет: у ссылки — переходит по адресу, у поля — подставляет имя, под которым данные уйдут на сервер.

Атрибуты не ломают страницу, даже если браузер их не знает: содержимое остаётся на месте, а данные для скриптов можно выносить в data-*.

2. Синтаксис и пример

<p hidden>Этот текст не виден</p>

Запись выше — базовый вариант использования. Обратите внимание, как атрибут hidden: скрыть элемент вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Часть атрибутов глобальная — их можно ставить почти любому тегу (class, id, lang, title, hidden). Другие принадлежат конкретному тегу: href — только ссылкам, src — медиа, name — полям формы. Смешивать их бессмысленно: браузер просто проигнорирует незнакомый атрибут.

В реальной разметке атрибут hidden: скрыть элемент встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

Все современные браузеры понимают стандартные атрибуты. Нестандартные не вызывают ошибок, но лучше использовать их через data-* — так разработчик явно показывает, что атрибут нужен только скриптам.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

hidden убирает из раскладки и из таб-порядка.

Не сочетайте hidden со стилем display: flex — стиль перебивает атрибут.

7. Практическое задание

Скройте подсказку и покажите её через стили в песочнице.

Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

<p hidden>Этот текст не виден</p>

8. Как применять в проектах

Атрибуты используются в формах для сбора данных, в ссылках — для навигации, в скриптах — через querySelector и dataset. Удобно, когда разметка несёт в себе и данные, и состояние.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

атрибут применим к выбранному тегу;
значение осмысленное: там, где ожидается список, разделяйте элементы правильно;
для форм заданы name, тип и, где нужно, value;
булевые атрибуты стоят как в документации;
данные для скриптов вынесены в data-*;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам