En HTML existe un atributo hidden que permite ocultar elementos de una manera sencilla, sin necesidad de recurrir a CSS o Javascript. En este artículo te vamos a explicar a utilizarlo y veremos algunos consejos y consideraciones importantes a tener en cuenta.

En el artículo Atributo hidden del HTML encuentras los siguientes apartados de interés.

• Qué es el atributo hidden de HTML
• Es un atributo boleano
• ¿Para qué puedo usar el atributo hidden?
• Atributo hidden y el CSS
• ¿Aconsejamos usar hidden?
• Hidden y Javascript
• Conclusión

Qué es el atributo hidden de HTML

En HTML hidden es un atributo global que podemos usar a cualquier elemento de la página y que afecta directamente a su visibilidad. Funciona de manera sencilla, ocultando el elemento de la página en el caso que el atributo esté presente.

Un ejemplo de uso sería el siguiente:

<div hidden>
  Este elemento div no se verá en la página
</div>

Dado que es un atributo global lo podemos usar en cualquier etiqueta del HTML donde lo precisemos.

Es un atributo boleano

El atributo hidden es boleano. Eso quiere decir que no necesitamos asignarle ningún valor. Lo único que importa es si está presente o no ese atributo.

• Si el atributo existe, entonces ocultará el elemento
• Si el atributo no está presente, entonces no aplicará y el elemento se verá normalmente.

Eso quiere decir que no es necesario hacer algo como esto:

<div hidden="true">
  Esto está oculto por el atributo hidden que hemos colocado.
</div>

Incluso aunque el valor del atributo boleano hidden fuera "false", seguiría aplicando, pues el atributo está presente.

<div hidden="false">
  Esto está oculto por el atributo hidden que hemos colocado.
</div>

En resumen, no importa el valor que le pongamos al atributo hidden, simplemente importa que esté presente en la etiqueta para que se tenga en cuenta.

¿Para qué puedo usar el atributo hidden?

Bueno, en realidad puedes usarlo para todo aquello que se te ocurra, pero generalmente lo usaremos para marcar contenido que no resulta relevante en el momento de carga de la página.

Por ejemplo, podríamos tener un texto de un artículo que no tiene ya importancia y no lo queremos borrar completamente del código sino simplemente ocultar. Puede haber interfaces de usuario que no queremos que se vean hasta que Javascript no las haya inicializado, etc.

Atributo hidden y el CSS

Es muy importante saber que cualquier estilo CSS de visibilidad prevalece frente al atributo hidden del HTML. Por ese motivo no se recomienda de manera general confiar que los atributos hidden van a funcionar en todas las ocasiones.

Por ejemplo, si tenemos un atributo hidden en un párrafo:

<p hidden>Este párrafo pensaría que está oculto</p>

En el caso que mediante CSS se hubiera definido un simple display: block a los elementos párrafo, entonces habríamos desactivado toda posibilidad de funcionamiento del atributo hidden.

p {
  display: block;
}

En este caso, como todos los párrafos tienen definido el valor de display con el valor block, entonces ningún atributo hidden podría llegar a funcionar. Esto puede llegar a representar un problema si estamos confiando que hidden debería ocultarnos este párrafo.

Por tanto, cualquier valor de display distinto de "none", derivaría en una desactivación de cualquier comportamiento esperado del atributo hidden.

Estilos CSS para asegurarnos que hidden funcionará correctamente

Para solucionar este posible problema, si es que queremos que el atributo hidden prevalezca sobre el display que se haya definido en un elemento dado, podemos usar un código CSS de selector por atributo.

[hidden] { 
  display: none !important;
}

El CSS anterior indica que cualquier elemento que tenga el atributo hidden debería tener un display a none. Además con la declaración !important conseguimos que ese estilo sea más poderoso que otras reglas CSS que se definan más adelante sobre elementos con el atributo hidden.

¿Aconsejamos usar hidden?

La pregunta del millón es ¿debo o no debo usar hidden?. La clave está en el grado de control que tengas sobre tu código y los complementos que uses al CSS, como frameworks CSS, Javascript, etc.

En principio con el debido control y sabiendo las limitaciones de este atributo, podría no haber problema en usarlo, pero como has podido comprobar, hidden es un atributo bastante débil y es fácilmente ofuscado por otros factores como el CSS.

Si me piden mi opinión personal, prefiero definir mis propias reglas CSS para ocultar elementos. Personalmente tampoco me gusta el hecho de indicar en el HTML aspectos que tienen que ver con la presentación, como el hecho de que un elemento se vea o no en la página.

Hidden y Javascript

El atributo hidden también está presente en los elementos del DOM de manera global. Es una propiedad boleana de los elementos de la página a la que podemos asignarle un true o un false para ocultar o no esos elementos.

Por ejemplo, si tenemos un objeto del DOM, podemos asignar a su propiedad hidden un valor true para hacer que se oculte.

let elemento = document.getElementById('parrafo');
elemento.hidden = true;

Como supondrás, asignando false el elemento dejaría de ocultarse. Este es un truco sencillo para ocultar o mostrar elementos pero tiene el mismo problema que el propio atributo hidden. Es decir, en caso que haya un display aplicado con CSS sobre el elemento, dejaría de funcionar.

Para ver un ejemplo de aplicación dinámica de la propiedad hidden dejamos un código por aquí donde encontrarás un párrafo y un botón. Al pulsar el botón se ocultará o se mostrará el párrafo, cambiando alternativamente el valor de la propiedad hidden de Javascript.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Trabajando con hidden en Javascript</title>
  <style>
    /*
    Si colocamos este estilo el ejemplo se nos iría al traste
    p {
      display: block;
    }
    */
  </style>
</head>
<body>
  <h1>Atributo hidden</h1>

  <p hidden="false" id="parrafo">
    Esto está oculto por el atributo hidden que hemos colocado.
  </p>

  <button id="toggle">ocultar / mostrar</button>

  <script>
    document.getElementById('toggle').addEventListener('click', function() {
      let elemento = document.getElementById('parrafo');
      elemento.hidden = ! elemento.hidden;
    });
  </script>
</body>
</html>

Fíjate que el código CSS está comentado. Si no estuviera comentado el ejemplo simplemente no funcionaría, porque estaríamos aplicando un display: block a todos los párrafos, lo que vencería al atributo hidden.

Solo para que quede constancia y por si alguien se lo pregunta, como otra alternativa más fiable basada en Javascript para ocultar o mostrar el párrafo de manera alternativa podríamos haber usado también este código:

let elemento = document.getElementById('parrafo');
elemento.style.display = elemento.style.display == 'block' ? 'none' : 'block';

Conclusión

Hemos conocido y aprendido a usar el atributo hidden, global a todos los elementos HTML. Hemos visto que tiene cierta utilidad pero que resulta conflictivo por su debilidad. Queda a tu juicio si lo piensas usar o no, pero en todo caso es bueno que lo conozcas por si te lo encuentras por ahí en cualquier ejemplo o proyecto de web.