¿Ya dominas lo básico? Un curso estructurado de HTML & CSS es la vía rápida para dar el salto.
Ver cursos de HTML & CSS en UdemyEnlace de afiliado. No te cuesta nada extra.
- 01Preparar el entorno (lo que necesitas)
- 02Tu primer HTML
- 03Listas y enlaces
- 04Poner color con CSS
- 05Selectores CSS y clases
- 06Maquetar con Flexbox
- 07Probar imágenes y tablas
- 08Probar los controles de formulario
- 09Entender el modelo de cajas
- 10Introducción al diseño adaptable (media queries)
- 11Variables CSS (propiedades personalizadas)
- 12Maquetar con CSS Grid
- 13Añadir una animación
- 14Escribir comentarios
- 15Añadir interacción con pseudoclases (:hover)
- 16:not() y selectores con varias condiciones en CSS
- 17Fundamentos de las metaetiquetas y el SEO
- 18Fundamentos de accesibilidad (alt y aria-label)
- 19Probar los atributos data (data-*)
- 20Transiciones CSS (cambios suaves al pasar el ratón)
- 21iframe (incrustar otra página)
- 22position (colocar un elemento con precisión)
- 23z-index (indicar el orden de apilamiento)
- 24Fundamentos de localStorage (guardar datos en el navegador)
- 25Las etiquetas video y audio (incrustar medios)
- 26Tablas avanzadas (colspan y rowspan)
- 27Fundamentos de la especificidad en CSS
- 28Fundamentos de SVG (dibujar imágenes vectoriales)
- 29Flexbox avanzado (envolver y crecer)
- 30Validación de formularios (required y pattern)
- 31CSS Grid avanzado (grid-template-areas)
- 32Las etiquetas details y summary (crear un panel plegable)
- 33Contadores CSS (numeración automática)
- 34Tamaños de letra fluidos con clamp()
- 35prefers-color-scheme (compatibilidad con el modo oscuro)
- 36Construir un deslizador con input type=range
- 37Fijar una proporción con aspect-ratio
- 38Ajustar cómo se muestra una imagen con object-fit
- 39Girar y escalar con transform
- 40Servir imágenes adaptables con la etiqueta picture
- 41Mostrar el foco del teclado con :focus-visible
- 42Desplazamiento suave con scroll-behavior
- 43Cambiar la disposición por componente con container queries
- 44Crear un efecto de cristal esmerilado con backdrop-filter
- 45Construir una rejilla flexible con repeat() y minmax()
- 46Fijar una cabecera en su sitio con position: sticky
- 47Añadir pseudoelementos con ::before y ::after
- 48Recortar textos largos con puntos suspensivos usando text-overflow
- 49Usar un valor calculado en CSS con calc()
- 50[Aplicado] Construye un sitio web sencillo
Las etiquetas details y summary (crear un panel plegable)
En esta lección construirás un bloque desplegable — el típico de las preguntas frecuentes — usando solo HTML.
<details> crea un contenedor plegable y <summary>, que va dentro y en primer lugar, es la parte siempre visible sobre la que se hace clic. El resto del contenido permanece oculto hasta que el usuario lo abre. Si añades el atributo open, aparece desplegado de inicio.
El código de ejemplo monta dos preguntas frecuentes. Haz clic en cada título y observa que funciona sin una sola línea de JavaScript.
El error habitual es poner el <summary> en otro sitio que no sea el primer hijo: entonces el navegador genera un título por defecto («Detalles») y tu texto se queda dentro del contenido plegado.
Se agradece mucho en el trabajo real porque viene con la accesibilidad ya resuelta: es navegable con teclado y los lectores de pantalla anuncian correctamente el estado abierto o cerrado, algo que cuesta bastante conseguir con un desplegable hecho a mano.
💡 La vista previa se genera por completo en esta página; no se envía nada al exterior.