Entre las muchas acciones que podemos realizar utilizando una estructura básica en HTML, una de las más comunes es ocultar elementos. Estos elementos pueden permanecer en su posición en el contenido mientras permanecen ocultos o bien desaparecer por completo sin dejar espacio ni ser reflejados en el código.
Si te encuentras ante la duda sobre qué método utilizar para ocultar elementos HTML, en el siguiente artículo responderemos a esa pregunta.
Tabla de contenidos
¿Qué es un elemento HTML oculto?
Un elemento está HTML oculto cuando no se muestra de forma visible en el sitio web, pero sigue estando presente en el código HTML. El comportamiento de estos elementos pueden ser utilizados para diferentes propósitos.
Entre sus usos más frecuentes es contener contenido adicional. Los elementos ocultos pueden almacenar información que no se muestra en un primer vistazo, pero que puede ser mostrada mediante la interacción del usuario, como el hacer clic o pasar el mouse sobre el elemento.
Otro uso frecuente en el que se ocultan elementos HTML es al establecer valores predeterminados en un formulario. Estos elementos pueden ser utilizados para guardar información adicional o identificadores de envío, que no se muestran directamente en el formulario y no se manifiestan a la vista del usuario.
El ocultar elementos HTML usualmente es una práctica que se utiliza para crear efectos visuales, como animaciones o transiciones, que se activan cuando el usuario interactúa con la página. Esto permite agregar funcionalidad y mejorar la experiencia del usuario sin afectar la apariencia general del sitio web.
¿Por qué ocultar un elemento HTML?
Si bien ya hemos podido mencionar de forma concreta en que casos es frecuente el ocultar elementos HTML es necesario destacar que hay varias razones por las que se puede decidir realizar esta acción, por ejemplo:
Datos de un formulario: al momento de crear formularios en nuestro sitio web, suele ser común el disponer de campos u otros datos ocultos que contienen información necesaria para el procesamiento del formulario, como valores predeterminados, identificadores de envío, etc.
Contenido complementario: el ocultar elementos HTML permite mantener todo aquel contenido que se considere adicional o complementario fuera de la vista principal, hasta que el usuario interactue con la página y decida ver ese contenido.
Esta acción se considera como una buena práctica en la experiencia del usuario, además que estaríamos mejorando la organización evitando que la página se vea sobrecargada.
Accesibilidad: el ocultar elementos HTML como hemos mencionado es una de las buenas prácticas que benefician la experiencia de usuario como también la accesibilidad al proporcionar información adicional, como etiquetas o descripciones para lectores de pantalla, sin interferir con la experiencia visual del usuario.
Efectos visuales: ocultar elementos HTML de manera temporal nos permite crear efectos visuales, como animaciones o transiciones, que se activan cuando el usuario interactúa con otros elementos del contenido. De esta manera podemos agregar dinamismo y atractivo visual a nuestra web sin saturar la interfaz.
Rendimiento: en algunas situaciones, ocultar elementos que no son necesarios inicialmente puede mejorar el rendimiento de la página, ya que el navegador no tendrá que procesar y renderizar esos elementos hasta que sean necesarios.
Orden en el diseño: ocultar elementos HTML de manera puntual nos da la oportunidad de presentar una interfaz más limpia y organizada, ocultando características avanzadas o poco utilizadas hasta que el usuario las requiera.
¿Cómo ocultar un elemento HTML?
Hemos podido apreciar que el ocultar elementos HTML es una técnica sumamente útil que nos permite mejorar la experiencia del usuario, la accesibilidad, los efectos visuales y el rendimiento de nuestro sitio web, sin sacrificar el diseño y el aspecto general de la interfaz actual.
Conociendo sus bondades, es momento de plantear los métodos por lo cuales podemos ocultar elementos HTML de forma sencilla.
Atributo Hidden en HTML
El atributo hidden en HTML es una forma sencilla de ocultar elementos HTML de la vista del usuario, sin tener que usar estilos CSS o incluso JavaScript.
Cuando se agrega el atributo hidden a un elemento HTML, este elemento no sera visible en el contenido del sitio web.
El atributo hidden podría ser equivalente a establecer la propiedad CSS display: none; para ese elemento/etiqueta.
(Visita el sitio web haciendo clic en la imagen ↑)
El atributo hidden puede ser empleado de la siguiente manera:
<div hidden>Ocultar elementos HTML por medio del atributo hidden</div>
Es importante tener en cuenta que, aunque el atributo hidden oculta de forma visual el elemento, este sigue estando presente en la estructura del documento HTML y ocupando espacio en la página.
Si queremos eliminar completamente el elemento del flujo de la página, se debe utilizar la propiedad CSS display: none; en su lugar.
Propiedad Display en CSS
La propiedad display es fundamental para controlar el diseño y la presentación de los elementos en el contenido de un web. Junto con otras propiedades que nos proporcionan los estilos CSS, podemos lograr una amplia variedad de diseños y efectos visuales.
En este caso vamos a destacar el ya mencionado valor “none” que nos permitirá ocultar el elemento que lo posea, retirándolo por completo del documento HTML, este valor es equivalente a usar visibility: hidden; más height: 0; y width: 0;.
(Visita el sitio web haciendo clic en la imagen ↑)
La propiedad display puede ser empleada de la siguiente manera:
<div style=”display:none;”>Ocultar elementos HTML por medio de la propiedad display:none</div>
Al usar el valor display: none; debemos tener presente que se encarga de ocultar completamente el elemento, eliminándolo del flujo del documento HTML a diferencia de visibility: hidden;, que mantiene el espacio reservado para el elemento.
Propiedad Visibility en CSS
Siguiendo con los estilos CSS, la propiedad display con el valor none no es el único método que podemos utilizar para ocultar elementos HTML, también podemos usar la propiedad visibility.
A diferencia de la propiedad display, que puede ocultar completamente un elemento, la propiedad visibility nos permite determinar si un elemento debe ser visible u oculto, pero manteniendo su espacio en el diseño.
(Visita el sitio web haciendo clic en la imagen ↑)
La propiedad visibility puede ser empleada de la siguiente manera:
<div style="visibility: hidden;">Ocultar elementos HTML por medio de la propiedad visibility, pero sigue ocupando espacio en el contenido.</div>
La diferencia clave entre visibility: hidden; y display: none; es que, con visibility: hidden;, el elemento sigue ocupando su espacio en el contenido del sitio web, mientras que con display: none;, el elemento se elimina completamente de la estructura del documento HTML.
Debemos tener muy presente que, si bien visibility: hidden; oculta el elemento de manera visual, este seguirá siendo accesible para tecnologías de asistencia, como lectores de pantalla. Esto lo hace más adecuado para casos o circunstancias donde se desea ocultar temporalmente un elemento, pero mantener su accesibilidad.
Propiedad Opacity en CSS
Por último, pero no menos importante, un método más en el cual podemos ocultar elementos HTML es usando la propiedad opacity.
Esta propiedad de CSS se encarga de controlar la transparencia de un elemento.
Es posible establecer un valor entre 0 y 1, donde 0 representa una total transparencia (el elemento será invisible) y 1 representa una opacidad total (el elemento se mostrará completamente visible).
(Visita el sitio web haciendo clic en la imagen ↑)
La propiedad opacity puede ser empleada de la siguiente manera:
/* Elemento totalmente solido-visible*/
div.opaque { opacity: 1; }
/* Elemento semi-transparente */
div.semi-transparent { opacity: 0.5; }
/* Elemento totalmente transparente-oculto */
div.transparent { opacity: 0; }
Como hemos podido apreciar, la propiedad opacity en CSS permite controlar la transparencia de los elementos en el contenido HTML. Es una alternativa que puede resultar útil sobre todo para crear efectos visuales; sin embargo, debe ser usada con precaución, teniendo en cuenta los posibles impactos en la accesibilidad y el rendimiento en el sitio web.
Teniendo presentes los 3 distintos métodos que nos proporcionan las propiedades de los estilos CSS podemos dejar por sentado lo siguiente:
Si se requiere que el elemento desaparezca completamente del diseño, display: none es la mejor opción.
Si queremos ocultar el elemento pero aún se desea mantener su espacio y la capacidad de interactuar con él, opacity: 0 o visibility: hidden son más apropiados.
Si la finalidad en lugar de ocultar elementos HTML es animar la visibilidad de dicho elemento, tanto opacity: 0 como visibility: hidden son adecuados, mientras que display: none no es útil en este caso.
Ocultar elementos HTML y SEO
Al ocultar elementos HTML en el contenido, un factor que debemos tener en cuenta es como los motores de búsqueda van a interpretar y leer este contenido, que dependiendo del método que hayamos empleado puede afectar al SEO general de nuestro sitio web.
A continuación, vamos a destacar algunos puntos importantes en relación con ocultar elementos HTML y la optimización SEO.
Contenido oculto: los motores de búsqueda, como Google, tienen la capacidad de detectar y analizar el contenido oculto en un sitio web. Si el contenido oculto es considerado como relevante y valioso para los usuarios, puede ser indexado y utilizado para mejorar el posicionamiento general.
Evitar abusar del contenido oculto: la contraparte del punto anterior es que si se abusa de ocultar elementos HTML, con la intención de manipular los algoritmos de búsqueda, esto puede ser considerado como una práctica de optimización poco ética, conocida como “black hat SEO“.
De ser este el caso estaríamos siendo penalizados por parte de los motores de búsqueda, lo que desfavorece de manera sustancial el posicionamiento web.
Uso puntual: el ocultar elementos HTML debe ser una acción que debamos utilizar de manera apropiada y con un propósito claro, como mejorar la experiencia del usuario, proporcionar información adicional o crear efectos visuales. No se debe ocultar contenido que se considere clave o de importancia para los usuarios.
Pruebas periódicas: si estamos optimizando nuestro sitio web, siempre es recomendable el realizar pruebas y monitorear el impacto del contenido oculto en el rendimiento de la página web y en los resultados de búsqueda. De esta manera tendremos la oportunidad de ajustar las estrategias de optimización SEO según sea necesario.
Etiquetado semántico: al ocultar elementos HTML, dependiendo del método a usar, es importante emplear el etiquetado semántico adecuado, como <details> y <summary>, para indicar claramente la relación entre el contenido visible y el oculto.
Las etiquetas mencionadas son una de las adiciones de HTML5 que vale la pena considerar como un método mas para ocultar elementos HTML.
Estas etiquetas se usan en conjunto para determinar un contenido oculto, pero con un encabezado que se mantiene visible para dar contexto.
(Visita el sitio web haciendo clic en la imagen ↑)
Un ejemplo de las etiquetas <details> y <summary> en uso sería de la siguiente manera:
<details> <summary>Más información</summary> <p>Este es un contenido oculto que se muestra cuando se hace clic en el encabezado.</p> </details>
Considerando los puntos presentados, ocultar elementos HTML resulta ser una estrategia beneficiosa para mejorar la experiencia del usuario y el rendimiento de la página web, siempre y cuando se haga de manera responsable y transparente, respetando los principios del SEO y la accesibilidad web.
Conclusión
Hemos observado que ocultar elementos HTML según sea necesario no solo es sencillo, sino que también conlleva una serie de beneficios que quizás no se habían tenido en cuenta anteriormente.
Entre estos beneficios sin duda es la mejora en la experiencia del usuario. Al ocultar elementos que no son necesarios inicialmente, se puede mantener una interfaz más limpia y organizada, evitando sobrecargar al usuario con información o funcionalidades innecesarias.
Por otro lado, ocultar elementos que tienen una prioridad menos relevante en el contenido también puede tener un impacto positivo en el rendimiento de la página.
Al no tener que procesar y renderizar esos elementos hasta que sean requeridos, se puede mejorar la velocidad de carga y la experiencia general del usuario.
Además, el ocultar elementos HTML de forma focalizada nos da la libertad de crear efectos visuales dinámicos y atractivos, como animaciones o transiciones, que pueden activarse cuando el usuario interactúa con otros elementos en el contenido de la página.
Finalmente, ocultar elementos también puede ser útil para organizar y separar el contenido de un sitio web que pueda ser muy extenso, manteniendo una estructura más simple y sencilla de consumir. Incluso puede ser una medida de seguridad para ocultar información confidencial o sensible y evitar su exposición.
La acción de ocultar elementos HTML es más común de lo que parece, y gracias a su simplicidad y gran flexibilidad, se convierte sin duda en una herramienta que debemos considerar incluir en nuestros proyectos web.
También te puede interesar:
- WordPress o HTML, ¿Cuál elegir?
- Cómo Subir una Página Web HTML a Internet
- ¿Cómo editar HTML en WordPress?
- Mejores editores HTML
- ¿Cómo añadir el efecto Parallax en WordPress?
- Añadir animaciones de contenido en WordPress (con y sin plugins)
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y Woocommerce en Webempresa.
