Mejorando las opciones con optgroup

Cuando trabajamos con elementos select que tienen muchas opciones, puede ser útil agruparlas de forma visual para mejorar la experiencia del usuario. HTML nos ofrece dos formas de hacerlo: usando <optgroup> y <hr>.

Usando optgroup para agrupar opciones

El elemento <optgroup> nos permite agrupar opciones relacionadas bajo una etiqueta común. Esto es especialmente útil cuando tenemos categorías claras en nuestras opciones.

<select id="filter-technology">
  <option value="">Todas las tecnologías</option>

  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
    <option value="react">React</option>
    <option value="vue">Vue</option>
  </optgroup>

  <optgroup label="Backend">
    <option value="node">Node.js</option>
    <option value="python">Python</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
  </optgroup>

  <optgroup label="Base de datos">
    <option value="mysql">MySQL</option>
    <option value="mongodb">MongoDB</option>
    <option value="postgresql">PostgreSQL</option>
  </optgroup>
</select>

Los <optgroup> tienen algunas características importantes:

• El atributo label es obligatorio y define el texto que se mostrará como encabezado del grupo
• No son seleccionables, solo sirven como separadores visuales
• Ayudan a organizar opciones de forma semántica y accesible

Usando hr como separador

Otra forma de separar opciones es usando el elemento <hr> (horizontal rule) directamente dentro del select. Aunque no es tan semántico como <optgroup>, puede ser útil en algunos casos:

<select id="filter-level">
  <option value="">Todos los niveles</option>
  <option value="junior">Junior</option>
  <option value="mid">Mid-level</option>
  <option value="senior">Senior</option>

  <hr />

  <option value="intern">Prácticas</option>
  <option value="freelance">Freelance</option>
</select>

Nota: El soporte de <hr> dentro de <select> puede variar según el navegador. En algunos navegadores modernos funciona bien, pero en otros puede no mostrarse correctamente. Por eso, <optgroup> suele ser la opción más recomendada.

Combinando ambos enfoques

Puedes combinar diferentes técnicas para crear selects más complejos y organizados:

<select id="job-location">
  <option value="">Todas las ubicaciones</option>

  <optgroup label="España">
    <option value="madrid">Madrid</option>
    <option value="barcelona">Barcelona</option>
    <option value="valencia">Valencia</option>
  </optgroup>

  <optgroup label="México">
    <option value="cdmx">Ciudad de México</option>
    <option value="monterrey">Monterrey</option>
    <option value="guadalajara">Guadalajara</option>
  </optgroup>

  <hr />

  <option value="remote">🌍 Remoto</option>
</select>

Ventajas de organizar tus opciones

Al organizar correctamente las opciones de tus selects obtienes:

1. Mejor experiencia de usuario: Los usuarios encuentran más fácilmente lo que buscan
2. Accesibilidad mejorada: Los lectores de pantalla pueden anunciar los grupos
3. Código más mantenible: Es más fácil agregar o modificar opciones cuando están organizadas
4. Aspecto más profesional: Tu aplicación se ve más cuidada y pensada

Recuerda que estas mejoras, combinadas con el estilado CSS que vimos en la clase anterior, te permitirán crear filtros mucho más profesionales y fáciles de usar en tu página de empleos.