Главная -> Справочник HTML5 и CSS3 -> Атрибут hidden

Глобальный атрибут hidden в HTML5

Указывает, нужно ли отображать данный элемент на странице.

Принимаемые значения:

Если атрибут равен true, то элемент не обрабатывается обозревателем.

Если атрибут равен false, то элемент обрабатывается обозревателем в штатном режиме.

В html коде допускается писать следующим образом:

<p hidden>Текст, который не будет отображаться</p>

Т.е. не обязательно писать hidden="true".

Пример использования:

<h1>Пример игры из спецификации html5</h1>
 <section id="login">
  <h2>Вход в игру</h2>
  <form>
  ...
  <!-- тут вызывается функция login() после проверки введенных данных пользователем -->
  </form>
  <script>
  function login() {
   // переключаем экраны
   document.getElementById('login').hidden = true;
   document.getElementById('game').hidden = false;
  }
  </script>
 </section>
 <section id="game" hidden>
  ...
 </section>

Примечания:

Элементы, которые не содержат атрибута hidden не должны ссылаться на элемент с атрибутом hidden. Т.е. например будет неверным, если тег <a> будет ссылаться на элемент <section hidden>.

Так же не стоит использовать атрибут hidden в тех элементах, которые не должны отображаться только в данных условиях, а при других обстоятельствах будут отображаться. Например будет неверно скрывать панели в диалоговых окнах со вкладками, т.к. часть данных будет скрыта от поисковых систем. Для таких целей лучше использовать панель с прокруткой.