Usando a tag optgroup em listas suspensas no HTML

O elemento <optgroup> é utilizado para agrupar opções em uma lista suspensa no HTML chamada <select>, com o objetivo de tornar a navegação mais organizada e intuitiva. A funcionalidade basicamente divide um grande número de itens <option> em pequenas seções. Note que o atributo label é obrigatório e será renderizado como o primeiro item na seção.

Para que usar o <optgroup>

O uso do <optgroup> é uma técnica eficiente para organizar listas suspensas extensas, melhorando a experiência do usuário ao facilitar a localização de opções específicas. Algumas práticas recomendadas e benefícios adicionais:

1. Agrupamento lógico: ao organizar opções em categorias lógicas, os usuários podem encontrar rapidamente o que estão procurando. Por exemplo, em um formulário de seleção de país, você pode agrupar países por continente.
2. Melhor usabilidade: dividir opções em grupos reduz a rolagem e o esforço cognitivo necessário para processar uma longa lista de itens.
3. Etiqueta visível: o atributo label fornece um título descritivo para cada grupo, ajudando os usuários a entender o contexto das opções disponíveis.
4. Acessibilidade: para usuários de tecnologias assistivas, como leitores de tela, o uso de <optgroup> pode melhorar significativamente a navegação e a compreensão da estrutura da lista suspensa.

Exemplo de Implementação

<select>
  <optgroup label="Frutas">
    <option value="maçã">Maçã</option>
    <option value="banana">Banana</option>
    <option value="laranja">Laranja</option>
  </optgroup>
  <optgroup label="Vegetais">
    <option value="cenoura">Cenoura</option>
    <option value="brócolis">Brócolis</option>
    <option value="espinafre">Espinafre</option>
  </optgroup>
</select>

Neste exemplo, as frutas e vegetais são agrupados separadamente, facilitando a localização de uma opção específica dentro de cada categoria. Veja abaixo o output desse código sem nenhuma estilização CSS.

Veja esta e outras dicas de ouro sobre desenvolvimento web, arquitetura da informação, tecnologias, SEO e mais aqui no laboratório dos ratos da Pink and Brain.