Usando a tag optgroup em listas suspensas no HTML
O elemento é utilizado para agrupar opções em uma lista suspensa no HTML chamada , com o objetivo de tornar a navegação mais organizada e intuitiva.
César Canteiro em Tempo de leitura: 3 minutos 44 views.
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:
- 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.
- Melhor usabilidade: dividir opções em grupos reduz a rolagem e o esforço cognitivo necessário para processar uma longa lista de itens.
- Etiqueta visível: o atributo
labelfornece um título descritivo para cada grupo, ajudando os usuários a entender o contexto das opções disponíveis. - 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.