El componente sigue a la tarea.

Vistas alternativas de una misma zona.

Úsalo cuando

Pocas secciones relacionadas que no necesitan verse juntas.

Evítalo cuando

Procesos secuenciales o información que deba compararse simultáneamente.

Comportamiento

Izquierda y derecha cambian el foco; Home y End van a los extremos.

Documentación del patrón

Contenido expandible por bloques.

Úsalo cuando

Respuestas o detalles secundarios, con títulos claros.

Evítalo cuando

Pasos esenciales que el usuario no debería buscar ocultos.

Comportamiento

details y summary ofrecen interacción nativa sin recrear todos los estados.

Documentación del patrón

Una tarea o explicación que interrumpe el contexto.

Úsalo cuando

Una acción breve y necesaria, con cierre claro.

Evítalo cuando

Contenido extenso o navegación rutinaria.

Comportamiento

El foco entra, permanece en el diálogo y vuelve al botón de origen.

Documentación del patrón

Datos comparables en filas y columnas.

Úsalo cuando

Precios, características o registros con encabezados.

Evítalo cuando

Maquetar una página o mostrar tarjetas sin relaciones tabulares.

Comportamiento

caption y th comunican relaciones; el desplazamiento puede ser interno.

Documentación del patrón

Colección de elementos relacionados.

Úsalo cuando

Pasos, recursos, tareas o resultados sencillos.

Evítalo cuando

Cuando los datos necesitan relaciones entre varias columnas.

Comportamiento

ol para secuencia; ul cuando el orden no es significativo.

Documentación del patrón