El Atributo HIDDEN

Tutorial: Uso del Atributo hidden en HTML
El atributo hidden en HTML se utiliza para ocultar elementos de la vista del usuario y de tecnologías de asistencia (como lectores de pantalla). Indica que el contenido no es relevante en el contexto actual, pero puede mostrarse dinámicamente mediante JavaScript. Aquí un tutorial detallado:

¿Qué hace el atributo hidden?

Propósito: Oculta un elemento visualmente y lo excluye del árbol de accesibilidad.

Efecto: Aplica display: none de forma predeterminada, eliminando el elemento del flujo del documento.

Sintaxis: Es un atributo booleano (no necesita valor).

<p hidden>Este texto está oculto.</p>

Casos de Uso

• Contenido condicional: Mostrar/ocultar secciones basadas en interacciones del usuario (ej: mensajes de error, modales).

• Evitar desplazamientos de layout (CLS): Ocultar elementos hasta que se cargue contenido crítico.

• Mejorar la semántica: Indicar que un elemento no es relevante temporalmente.

Ejemplos Prácticos

Ejemplo 1: Mensaje de error oculto

<div id="mensajeError" hidden>
  ¡Error! Completa todos los campos.
</div>

<button onclick="document.getElementById('mensajeError').hidden = false">
  Mostrar error
</button>

Ejemplo 2: Formulario paso a paso

<form>
  <!-- Paso 1 (visible) -->
  <div id="paso1">
    <input type="text" placeholder="Nombre">
    <button type="button" onclick="mostrarPaso2()">Siguiente</button>
  </div>

  <!-- Paso 2 (oculto inicialmente) -->
  <div id="paso2" hidden>
    <input type="email" placeholder="Correo">
    <button type="submit">Enviar</button>
  </div>
</form>

<script>
  function mostrarPaso2() {
    document.getElementById('paso1').hidden = true;
    document.getElementById('paso2').hidden = false;
  }
</script>

Diferencias entre hidden y CSS display: none

Aspecto	Atributo hidden	CSS display: none
Semántica	Indica irrelevancia contextual.	Solo afecta la presentación visual.
Accesibilidad	Oculta el elemento de lectores.	Puede no ocultarlo si no se usa aria-hidden.
Mantenimiento	Más simple para mostrar/ocultar.	Requiere manipulación de clases/estilos.

Buenas Prácticas

No uses hidden para contenido relevante:

Si el elemento es parte de la experiencia principal, usa CSS en su lugar.

Combina con ARIA para cambios dinámicos:

Si el elemento se muestra/oculta, usa aria-live para notificar a lectores de pantalla.

<div hidden aria-live="polite">Mensaje importante.</div>

Evita ocultar elementos interactivos:

Si un botón o enlace está oculto, no podrá recibir foco.

JavaScript: Mostrar/Ocultar

Puedes manipular el atributo hidden directamente:

// Ocultar
elemento.hidden = true;
// o
elemento.setAttribute('hidden', '');

// Mostrar
elemento.hidden = false;
// o
elemento.removeAttribute('hidden');

Accesibilidad

Elementos ocultos:

No son accesibles mediante navegación por teclado o lectores de pantalla.

Alternativas:

Si necesitas ocultar visualmente pero mantener accesibilidad, usa:

.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

Errores Comunes

Error 1: Usar hidden con CSS que lo anula

<div hidden style="display: block;"> <!-- ¡Sigue visible! --> </div>

Error 2: Ocultar contenido crítico para SEO

<h1 hidden>Palabras clave importantes</h1> <!-- Puede penalizar SEO -->

Soporte en Navegadores

Todos los navegadores modernos (Chrome, Firefox, Safari, Edge) soportan hidden.

Polyfill para navegadores antiguos (ej: IE10):

[hidden] { display: none !important; }

Conclusión

El atributo hidden es una herramienta sencilla y semántica para gestionar la visibilidad de elementos en HTML. Úsalo para ocultar contenido no relevante y mejora la experiencia de usuario combinándolo con JavaScript y buenas prácticas de accesibilidad.