DROPCODING BLOG

Qué es y Cómo usar la etiqueta Details en HTML (Ejemplo)

Hoy vamos a hablar de la etiqueta details en HTML, una de mis etiquetas favoritas (luego entenderás por qué). Ésta es una de esas etiquetas que la gente no suele conocer ya que es relativamente nueva, apareció con la salida de HTML5 (aunque ya hace unos añitos de eso).

Este va a ser un capítulo muy cortito, como la mayoría de vídeos de esta serie del diccionario HTML. Y por cierto, me estoy dejando la piel para hacer este diccionario, así que agradezco mucho cualquier feedback y que me sigas en mis redes sociales 👏.

Ahora, vamos con la etiqueta details.

¿Qué es la Etiqueta Details en HTML?

La etiqueta details se utiliza para crear un elemento desplegable que permite ocultar o mostrar contenido adicional.

Además, la etiqueta summary también se utiliza junto a la etiqueta details para especificar el texto que se muestra antes de expandir el contenido.

Esto se utiliza mucho, por ejemplo, en secciones de preguntas frecuentes o incluso en menús desplegables y otros elementos.

Cómo se Usa la Etiqueta Details (Ejemplo)

Vamos a ver un ejemplo en el editor para que se vea más claro.

Dentro de la etiqueta body tenemos la etiqueta details.

La etiqueta details es todo el recuadro que engloba el desplegable. Dentro de esta misma tenemos la etiqueta summary, que sería el título o la parte visible, y luego, cuando hagamos clic, se mostraría la parte desplegable con este div que mostraría el contenido que queramos.

Aquí he puesto texto, pero se podría poner lo que quisiéramos: listas, imágenes, etcétera. Hemos puesto como ejemplo «Presiona para ver más detalles», y cuando presionemos, aparecerá este texto.

<body>
  <details>
    <summary>Presiona para ver más detalles</summary>
    <div>
      Este es el contenido que se mostrará cuando hagas clic en "Presiona para ver más detalles".
    </div>
  </details>
</body>
</html>

Vamos a verlo en el navegador. Ya tendríamos la etiqueta summary, y simplemente tendríamos que darle clic para que se abra el desplegable.

ejemplo-etiqueta-details-html

Esto realmente es súper útil, sobre todo en secciones de preguntas frecuentes.

Y bueno, ¿por qué me gusta tanto esta etiqueta? La respuesta es muy simple: antes de que apareciera esta etiqueta en HTML, tenías que hacer estos widgets desplegables en CSS y en JavaScript.

Y aunque no sea una cosa muy difícil de hacer, requería escribir unas cuantas líneas de código que te puedes ahorrar utilizando esta etiqueta details, como hemos visto en el ejemplo.

Espero que te haya resultado útil esta lección y recuerda que si tienes cualquier pregunta o cualquier sugerencia, puedes dejarla en los comentarios.

Nos vemos en la proxima lección. ¡Adiós!

Apúntate a la Newsletter y Mejora tus Habilidades

Conoce los secretos mejor guardados sobre el Diseño y el Desarrollo Web.

Suscríbete

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *