10

A pergunta se refere as tags não tão comumente usadas, como por exemplo, <fieldset>, <legend>, <label> e <optgroup>.

Recentemente precisei fazer um trabalho extenso envolvendo formulários de cadastro e notei que essas tags são pouco usadas, ou em grande maioria, substituídas por div que acabam tendo a mesma 'Função', como de agrupar um bloco de dados do formulário que seria feito pelo <fieldset>.

Então minha dúvida seria:

  • Por que essas tags são pouco usadas (pelo menos no que pesquisei não encontrei muito uso)?
  • Existe alguma restrição/suporte (ou falta dele) por parte dos browsers? O que acho difícil, já que são implementações html5.
  • Além do aspecto estrutural, elas carregam consigo alguma função que dificilmente vamos perceber? Como comportamento diferenciado de acordo com o browser, ou em casos de acessibilidade/funções extras (se é que consegui me expressar bem nessa questão)?

Pois até agora não encontrei algo que mostrasse a real vantagem de usar essas tags (seja bruta, ou com algum reset de CSS) ou de criar uma div equivalente com um CSS próprio para atingir o mesmo objetivo.


O único que encontrei mais a respeito foi o <label>, normalmente utilizado para criação de checkbox e radio com css customizados.

Obs.:

Minha dúvida foi referente as tags de form devido ao meu trabalho recente com base nisso. Mas se houver uma resposta mais abrangente nesse área, tags de html5, seriam bem vindas também, pois sei que existem muitas tags pouco exploradas, como as tags de imagens, blocos, etc..

2
  • 3
    só uma observação: as tags informadas existem desde o HTML 4.01 26/11/2015 às 11:16
  • A sim. Acabei me perdendo em meio os pensamentos hahaha Pois no HTML5 existem tags menos usadas ainda. Mas bem lembrado. 26/11/2015 às 12:28

2 Respostas 2

10

Trabalhar com padrões ou não?

Não so em html como em outras linguagens da para resolver certos tipos de problemas de "n" formas diferentes, mas afinal, é aconselhavel ?

Da pra perceber em vários códigos "HTML5" a utilização de div's para tudo como era no html4 em vez de usar um padrão como este:

inserir a descrição da imagem aqui

O Desenvolvedor segue a risca a semantica passada? não, mas funciona ? sim. Em algums livros de html5 todas estas tags citadas tem a sua importancia e seu "por que" de existir.

Por exemplo:

1 - <fieldset> Ele é indicado para agrupar um conjunto de campos do formulario, uma das facilidades dele é dividir o formulario em várias seções.

Exemplo:

<form method="post">
  <fieldset>
    <legend><b>1 - Passo</b>

    </legend>Name:
    <input type="text" size="20">
    <br>Email:
    <input type="text" size="20">
  </fieldset>
  <p></p>
  <fieldset>
    <legend><b>2 - Passo</b>

    </legend>Favorite Color: Red:
    <input type="radio">Blue:
    <input type="radio">Green:
    <input type="radio">
    <p>Favorite Toothpaste: Crest:
      <input type="checkbox">Close-Up:
      <input type="checkbox">Gleem:
      <input type="checkbox">
    </p>
  </fieldset>
  <p></p>
  <fieldset>
    <legend><b>3 - Passo</b>

    </legend>
    <br>
    <center>
      <input type="button" value="Enviar" onclick="alert('Stop clicking the buttons')">
    </center>
    <br>
    <br>
  </fieldset>
</form>

2 - <legend> Ele anda lado a lado com fieldset para fazer a separação das seções.

3 - <label> Ele atua como uma extensão do elemento ampliando a área clicavel, como você citou o click no texto do label deixa marcado um checkbox.

4 - <optgroup> É usada para opções de grupo dentro de um elemento select.

Quando há muitas opções, uma simples camada de hierarquia pode ajudar o usuário na sua escolha. eles atuariam como um título para o grupo.

Exemplo:

<select name="enemy">
  <optgroup label="Milky Way">
    <option value="Apophis">Apophis</option>
    <option value="Anubis">Anubis</option>
    <option value="Replicators">Replicators</option>
  </optgroup>
  <optgroup label="Pegasus galaxy">
    <option value="Wraith">Wraith</option>
    <option value="Genii">Genii</option>
  </optgroup>
</select>

Por fim, o uso adequado destas tags que são raramente usadas vão de cada desenvolvedor, se você preza por semantica e por acessibilidade identificar e usar certas tags pode melhorar bastante a qualidade da aplicação web.

Leitura recomendada: Dive Into HTML5 por Mark Pilgrim

2
  • 1
    Sim, bem colocado. Vejo muito reuso de 'div' para tudo que se faz. Confesso também que antes de serviço, desconhecia muitas das tags que existem, apesar de já ser adepto de tags como section, header, nav e footer, muitas delas desconhecia. Recomenda alguma referência de estudo para isso? 25/11/2015 às 19:34
  • @CelsomTrindade deixei na resposta. 25/11/2015 às 19:50
8

De fato, é possível usar div no lugar destas tags, mas elas dão melhor semântica ao que está fazendo.

Isto é bom para documentar melhor o seu projeto do ponto de vista de desenvolvimento e também para melhorar a interpretação de outros softwares, como os buscadores, melhoradores de acessibilidade e outros especializados que podem saber como tratar estas tags de forma mais específica.

Além disto se um dia mudar alguma coisa na forma como os navegadores trabalham, tendo informação mais certeira pode trazer benefícios novos ao site sem mexer nele.

Cada uma delas possui uma vantagem específica, mas acho que uma resposta individual deixaria a pergunta muito ampla.

O baixo uso se deve principalmente pelo fato de serem relativamente novos. E também por desconhecimento por parte dos desenvolvedores. Muitos acham que elas não acrescentam nada.

O suporte está presente em todos os navegadores mais novos:

Outras formas:

É possível usar o html5shiv para suprir a falta no Internet Explorer mais antigo.

Coloquei no GitHub para referência futura.

3
  • A mesma lógica se aplica para as tags de imagem, por exemplo, ou section, certo? Andei lendo a base teórica delas no w3schools.com mas, como não havia encontrado nada a respeito, fiquei na dúvida. Talvez pelo que você comentou, negligência ou desconhecimento de grande maioria. Mas, em sua opinião, o uso das tags é o melhor caminho a seguir? 25/11/2015 às 19:10
  • O W3C não é o site mais recomendável pra aprender alguma coisa. Sempre é melhor elas sempre que fizerem sentido. A div deve ser usada para uma divisão, que é algo mais genérico. O mesmo vale para todas as outras tags, sempre que uma couber, deve usar. Só não pode abusar, inventar uso para ela. Aí pode até dividir mais. Vamos supor que tenha uma div e um fieldset no mesmo escopo (obviamente um estará dentro do outro). Um pode ter determinadas características de estilo configuradas, e a outra ter características diferentes. Dá para organizar melhor a estilização, flexibilizando mais tb.
    – Maniero
    25/11/2015 às 19:15
  • Certo. Compreendi a lógica. Obrigado! 25/11/2015 às 19:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .