¿Qué es el atributo hidden?
El atributo hidden en HTML oculta elementos no relevantes. Aprende cómo funciona, su impacto en accesibilidad y cómo manipularlo con JavaScript.
El atributo hidden es un atributo global booleano en HTML. Su función principal es indicar que un elemento no es relevante en el contexto actual de la página y, por lo tanto, los navegadores no deben mostrarlo al usuario.
¿Cómo funciona el atributo hidden?
- Visualmente: Cuando un elemento tiene el atributo
hidden, los navegadores no lo renderizan. Es decir, el elemento no se muestra en la página y no ocupa espacio en el diseño. Su efecto visual es muy similar a aplicar la propiedad CSSdisplay: none;. - Accesibilidad: De forma importante, el contenido marcado con el atributo
hiddentambién se oculta a las tecnologías de asistencia, como los lectores de pantalla. El elemento y su contenido se eliminan del árbol de accesibilidad, lo que significa que no serán anunciados ni estarán disponibles para la interacción a través de estas herramientas. Esto refuerza la idea de que el contenido es actualmente irrelevante. - Interactividad: Un elemento con
hiddenno puede recibir el foco del teclado (por ejemplo, mediante la tecla Tab) y su contenido no es interactivo (no se puede hacer clic en enlaces o botones dentro de él).
Al ser un atributo booleano, su simple presencia en la etiqueta activa su comportamiento. Por ejemplo, <div hidden> es la forma estándar de usarlo. Escribir hidden="hidden" o hidden="" también es válido y tiene el mismo efecto. Para que el elemento vuelva a ser visible, se debe eliminar el atributo hidden (o establecer su propiedad hidden en false mediante JavaScript).
¿Cuándo se utiliza el atributo hidden?
El atributo hidden es útil en diversas situaciones:
- Contenido condicional o que se revela dinámicamente: Para ocultar elementos que solo deben mostrarse bajo ciertas condiciones, tras una acción del usuario (como hacer clic en un botón), o cuando una aplicación de página única (SPA) cambia de vista.
- Elementos temporalmente irrelevantes: Si un elemento de la página ha dejado de ser pertinente para el estado actual de la interfaz o del flujo de información.
- Declarar contenido que aún no está listo: Por ejemplo, un panel que se llenará con datos más tarde mediante JavaScript.
- Implementar interfaces de usuario como pestañas o acordeones: Donde solo un panel de contenido es visible a la vez. (Aunque para acordeones simples,
<details>y<summary>son más semánticos).
Ejemplo de uso y manipulación con JavaScript:
<!DOCTYPE <strong>html</strong>>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Uso del Atributo Hidden</title>
<style>
.panel-oculto {
border: 1px solid #ccc;
padding: 15px;
margin-top: 10px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<button id="toggleBoton">Mostrar/Ocultar Panel</button>
<div id="miPanel" class="panel-oculto" hidden>
<h2>Información Adicional</h2>
<p>Este contenido estaba inicialmente oculto usando el atributo 'hidden'.</p>
<p>Ahora puedes verlo porque hemos interactuado con el botón.</p>
</div>
<script>
const boton = document.getElementById('toggleBoton');
const panel = document.getElementById('miPanel');
boton.addEventListener('click', function() {
// Alterna el estado de 'hidden' del panel
panel.hidden = !panel.hidden;
});
</script>
</body>
</html>
Lenguaje del código: PHP (php)En este ejemplo, el div con id="miPanel" está oculto al cargar la página. Al hacer clic en el botón, JavaScript cambia el valor de la propiedad hidden del panel, lo que hace que se muestre u oculte.
Diferencia con CSS (display: none; o visibility: hidden;)
Aunque el resultado visual de hidden es similar a display: none;, la principal diferencia es semántica:
hidden: Indica que el elemento es semánticamente irrelevante en el estado actual. Es una declaración sobre la pertinencia del contenido.display: none;: Es una directiva puramente presentacional que oculta un elemento sin implicar nada sobre su relevancia semántica.visibility: hidden;: Oculta el elemento, pero este sigue ocupando su espacio en el diseño, a diferencia dehiddenydisplay: none;.
Si bien es posible que una regla CSS con alta especificidad (por ejemplo, display: block !important;) anule el efecto del atributo hidden y haga visible el elemento, esto generalmente se considera una mala práctica, ya que contradice la intención semántica de hidden.
En conclusión, hidden es la forma preferida en HTML para controlar la visibilidad de los elementos basándose en su relevancia actual, asegurando que tanto la presentación visual como la accesibilidad reflejen ese estado.
