Existen diversas maneras de ocultar un elemento en el CSS, cada una con distintos efectos en cuanto a accesibilidad, diseño y rendimiento. Una de ellas es el atributo hidden HTML y hoy te contamos sus claves.

¿Qué es el atributo hidden HTML?

En HTML, el atributo hidden se utiliza para ocultar un elemento de la página web. Cuando se aplica el atributo “hidden” a un elemento, este no se muestra en la interfaz de usuario del navegador. 

El principal propósito del atributo hidden es proporcionar una forma sencilla de ocultar y mostrar elementos según sea necesario, sin tener que recurrir a estilos CSS o manipulación del DOM mediante JavaScript.

El atributo hidden sólo oculta el elemento en la visualización del usuario, pudiendo seguir siendo accesible a través del código fuente de la página y puede ser modificado o mostrado mediante JavaScript u otras herramientas de desarrollo web.

Atributo hidden HTML: guía básica

1. El atributo hidden se agrega directamente al elemento HTML que deseas ocultar.
2. Se puede aplicar a una amplia variedad de elementos HTML, como <div>, <p>, <span>, <input>, <button>, etc. Puedes utilizarlo en el elemento que mejor se ajuste a tus necesidades de diseño y funcionalidad.
3. Cuando un elemento tiene el atributo hidden aplicado, no se mostrará en la interfaz de usuario del navegador. El espacio que ocuparía el elemento se considerará vacío y se ajustará automáticamente el diseño de la página en consecuencia.
4. Aunque el atributo hidden oculta el elemento en la visualización del usuario, aún se puede acceder y manipular mediante JavaScript.

¿Por qué ocultar un elemento HTML?

Estas son algunas de las situaciones que se prestan a ocultar un elemento.

• No querer mostrar algún elemento inicialmente pero sí más adelante, según las acciones que realice el usuario. Por ejemplo, un formulario de contacto.
• Al ocultar elementos innecesarios o redundantes, puedes mejorar la accesibilidad de tu página web. 
• Ocultar elementos puede ser útil para crear efectos de animación o transiciones suaves en tu página web. Puedes ocultar un elemento inicialmente y luego mostrarlo con una animación cuando se cumplan ciertas condiciones o se active un evento específico.
• Al ocultar elementos en diseños responsive, puedes ajustar la apariencia de tu página en diferentes tamaños de pantalla o dispositivos. 
• Al realizar una carga contenido en tu página web, puedes ocultar elementos mientras se realiza la carga o el procesamiento. Esto evita que el contenido inacabado o no deseado se muestre temporalmente antes de que esté listo.
• Al realizar una migración de un sitio web el atributo hidden HTML puede ser útil para controlar la visibilidad de elementos durante el proceso de migración.

¿Cuál es la mejor manera de utilizar el atributo hidden HTML?

Pues dependerá del contexto y de los requisitos específicos de tu proyecto, pero puedes seguir algunas pautas generales para aprovechar al máximo este atributo.

• Utiliza el atributo hidden de manera semántica, es decir, oculta elementos que realmente no deberían ser visibles para el usuario en un momento dado. Evita ocultar elementos únicamente por razones de diseño o presentación
• Ten en cuenta la accesibilidad al ocultar elementos. Asegúrate de que el contenido oculto siga siendo accesible para los usuarios que utilizan lectores de pantalla u otras tecnologías de asistencia. Proporciona alternativas textuales o descripciones adecuadas para garantizar que todos los usuarios puedan acceder a la información relevante.
• Asegúrate de que el atributo hidden sea compatible con los navegadores que deseas admitir. En general, el atributo hidden es ampliamente compatible, pero siempre es una buena práctica verificar la compatibilidad en diferentes navegadores y versiones.