4 elementos do HTML que eu e a Torcida do Flamengo deveríamos usar mais

A versão 4 do HTML traz algumas novas tags bastante úteis. Eu mesmo deveria usá-las com mais frequência, mesmo assim sempre me irrito quando vejo suas funcionalidades implementadas de forma muito mais complicada. Aqui vão elas em ordem de importância.

1. Atributo title
   Este atributo pode ser colocado em praticamente qualquer elemento. Quando você passa o mouse sobre o elemento, os navegadores mostram o texto dentro do title como uma tooltip. Sua utilização mais interessante é nos links, permitindo dar mais informações para o usuário de aonde o link vai levar, antes mesmo de clicar no link e mudar de contexto. Melhora em muito o cheiro da informação. Pena que no Internet Explorer, se uma imagem é linkada ela incorretamente mostra o texto de seu atributo alt, em vez do do especificado title.
   Veja no link acima como funciona. Eis o código correspondente:

   <a href="http://www.steptwo.com.au/papers/kmc_informationscent/index.html" title="Explicação do conceito de cheiro da informação (em inglês)">cheiro da informação</a>

2. Elemento label
   Você já tentou marcar um checkbox ou um radiobutton e clicou fora do lugar certo? E já tentou fazer isto com um mouse falhando? É difícil de acertar, não? Eles são muito pequenininhos.
   
   Uma lei básica de interação é a chamada Lei de Fitts, que diz que o tempo para se clicar em um alvo é proporcional à sua àrea e inversamente proporcial à sua distância ao cursor. Algo grande e perto é clicado muito mais rápido do que algo pequeno e longe. É tão difícil clicar algo pequeno perto, quanto algo grande e longe. Por isto é nos programas de desktop você pode clicar no rótulo do checkbox para marcá-lo, pois se a área clicável é maior, torna-se mais fácil interagir.
   
   E será estamos condenados no HTML a ter que clicar em uma área tão pequena para marcar os checkboxes e os radiobuttons? Claro que não! O elemento label vem nos resgatar. Ele permite que você associe um rótulo e um elemento de um form. Tente clicar nos rótulos abaixo e veja como o radiobox é selecionado:
   
   
   Qual o melhor time do mundo?
   FlamengoO Rubro-negro da Gávea
   
   Este é o código HTML:
   

   Qual o melhor time do mundo?<br>
   <label><input name="time" value="0" type="radio">Flamengo</label>
   <label><input name="time" value="1" type="radio">O Rubro-negro da Gávea</label>

   
   De brinde, quem usa o label torna seu sítio muito melhor para deficientes visuais. A associação de elementos do form e seus rótulos costuma ser expressa apenas visualmente (e.g., colunas adjacentes numa tabela). A associação explícita permite que programas leitores de tela descrevam esta relação para o usuário. Na verdade, este é o motivo principal da criação deste elemento e a razão pela qual você deve usá-lo em todos os elementos de form.
   
   Pena que é tão difícil achar um rótulo que possa ser clicado. Acho que só em alguns sítios do Google e do Yahoo. O número de pessoas que usa este elemento é do tamanho da pequenininha torcida do Fluminense.


3. Elementos fieldset e legend
   Estes servem para agrupar elementos de um form. Visualmente os navegadores desenham uma caixa em volta dos elementos contidos por um fieldset, basta adicionar o legend para rotular o grupo. Veja como fica:
   Seus dados

   Endereço:

   Rua:
   CEP:

   
   

   Dados de pagamento:

   Número Cartão:
   Código de segurança:
   
   Confira o código:
   

   <form>
   <fieldset>
     <legend>Seus dados</legend>
     <fieldset>
       <legend>Endereço: </legend>
       <label>Rua: <input type="text"></label>
       <label>CEP: <input type="text"></label>
     </fieldset>
     <fieldset>
       <legend>Dados de pagamento: </legend>
       <label>Número Cartão<input type="text"><label>
       <label>Código de segurança<input type="text"></label>
     </fieldset>
   </fieldset>
   </form>
   

   Usando este elemento, você se valerá de um princípio básico de desenho visual chamado proximidade sem necessidade de usar enroladíssimas tabelas. Outra vantagem é que é possíver estilizar um grupo de elementos com simples regras CSS.


4. Elemento optgroup
   Confesso que este é o menos útil da lista, especialmente porque normalmente pull-down menus é um péssimo widget de interação. Nele você não pode ver todas as opções ao mesmo tempo, dificultando compará-las para escolher a melhor. Mas já que é interessante e pouco conhecido também entrou na lista. Ele te permite agrupar elementos dentro de um pull down menu. Veja o exemplo: Selecione seu timeFlamengoOutrosAqueleOutros
   
   Eis o código:

   <select>
   <option>Selecione seu time</option>
   <optgroup label="Rio de Janeiro">
     <option>Flamengo</option>
     <option>Outros</option>
   </optgroup>
   <optgroup label="São Paulo">
     <option>Aquele</option>
     <option>Outros</option>
   </optgroup>
   </select>