Las listas son un mecanismo increíble (y amigable) para organizar la información. Pero al mismo tiempo pierden «su poder» cuando aumentan de tamaño.

Son muchos los proyectos en los que he visto como había controles de tipo select con una extensa lista de opciones. Cuantos más elementos tiene una lista menos eficaz resulta y más tiempo hace perder al usuario.

Desde pequeños nos han dicho que debemos ordenar (agrupar) las cosas para poder manejarnos mejor con ellas. Por ejemplo es fácil de imaginar que invertimos más tiempo en encontrar una manzana en una bolsa llena de alimentos variados (fruta, pescados, carnes) que si la buscamos únicamente en la bolsa de la fruta.

Pues con las listas de los controles seleccionables sucede algo similar, si la lista tiene un número considerable de elementos podemos agruparlos usando optgroup para mejorar la usabilidad de este control.

¿Cómo usar optgroup?

    
Manzanas
Naranjas
Fresas
    
    
Chuletas
Filetes
Pollo
    
    
Sardinas
Truchas
Calamares
    

Como se aprecia su uso es realmente sencillo, simplemente se agrupa los options bajo la etiqueta optgroup y se sitúa el label para dar titulo a la agrupación.

Ejemplos

ManzanasFiletesSardinasNaranjasTruchasFresasChuletasPolloCalamares
ManzanasNaranjasFresasChuletasFiletesPolloSardinasTruchasCalamares

ManzanasNaranjasFresas
ChuletasFiletesPollo
SardinasTruchasCalamares

1. Lista desordenada
2. Lista ordenada
3. Lista ordenada y agrupada

Conclusión

No es ni mucho menos un descubrimiento pero estoy seguro que en una primera impresión alguno puede pensar que se trata de un widget y no una etiqueta HTML 😛 . En ocasiones nos volvemos locos implementando complejas soluciones sin darnos cuenta de estas sencillas alternativas.