hidden

O atributo global hidden é um atributo booleano que indica se um elemento é ou não relevante. Por exemplo, ele pode ser usado para esconder elementos de página que não podem ser usados até que o processo de login seja completo. Os navegadores não renderizarão elementos com o atributo hidden setado.

O atributo hidden não deve ser utilizado para esconder conteúdo que poderia legitimamente ser mostrado em outra apresentação, por exemplo, não é correto usar hidden para esconder abas de formulários em paineis, porque interfaces separadas por abas são meramente um tipo de apresentação em fluxo — o que pode ser igualmente mostrado em forma vertical com barra de rolagem. É similarmente incorreto usar este atributo para esconder conteúdo de apenas uma apresentação — se algo está marcado como hidden, ele está escondido de todas as apresentações incluindo, por exemplo, leitores de tela.

Elementos com hidden não devem estar ligados a outros elementos sem hidden. Elementos filhos de um elemento com o atributo hidden ainda estão ativos, ou seja, é possível executar a ação submit de um formulário ou uma tag script pode ser executada se em ambos os casos estes elementos forem filhos de um elemento com o atributo hidden.

Por exemplo, é incorreto o uso do atributo href referenciando a uma sessão marcada com o atributo hidden. Se o conteúdo não é aplicável ou relevante, não faz sentido fazer a referência.

Pode ser correto, entretanto, usar o atributo ARIA aria-describedbypara referenciar descrições que estejam, elas mesmas, escondidas. Esconder as descrições implica que elas não são úteis por si só. Mas elas podem ser escritas de forma que sejam úteis no contexto específico do elemento que descrevem

Similarmente, um elemento canvas com atributo hidden poderia ser usado como buffer por um script de gráficos, e um controle de formulário, usando seu atributo form, poderia referir-se a um elemento form com atributo hidden.

Nota: Mudar o valor da propriedade display no CSS de um elemento com o atributo hidden sobrescreve o comportamento. Por exemplo, elementos com o estilo display: flex; serão mostrados independente da presença do atributo hidden.

Especificações

Specification
HTML
# the-hidden-attribute

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
hidden
until-found value
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Veja também