Artigos HTML e CSS Tags HTML menos conhecidas

Tags obscuras do HTML

Muitos desenvolvedores da web lidam direta e diariamente com linhas e mais linhas de código HTML. A linguagem desenvolvida para lidar com todo o gerenciamento do conteúdo na web, definindo padrões de tags nomeadas para uma finalidade específica por cada uma, hoje domina o universo de desenvolvimento front-end no que concerne à organização dos elementos na tela, o hipertexto. Independente da definição de caso, para ser um bom desenvolvedor web, é preciso conhecer bem HTML e suas tags integrantes em ordem e finalidade.

Com o advento até um tempo atrás do HTML 4, e hoje do HTML 5, é natural que muitas dessas tags entrem em desuso ou sejam pouco conhecidas pelos usuários da linguagem, em vista das melhores opções tidas nas novas versões, além das opções de uso de frameworks javascript, flash, silverlight e afins. Entretanto, elas estão lá. As tags esquecidas pelos programadores ou até algumas nunca vistas antes existem na especificação HTML e podem ser usadas normalmente nas suas páginas web, algumas delas trazendo até benefícios do ponto de vista de SEO (Search Engine Optimization), isto é, melhor classificação nos resultados dos buscadores web.

Este artigo trata de mostrar algumas destas tags, com sintaxe, uso de atributos, exemplos práticos e explanações do que elas fazem. Daí a entender o porquê das mesmas terem sido esquecidas, fica a cargo do leitor.

Tags <abbr> (Abreviation) e <acronym>

Estes dois são muito semelhantes e na sua forma básica. Quando usadas junto ao atributo “title”, passar o mouse sobre o conteúdo do texto fará com que o texto do título mostre a dica, o texto informado em forma de tooltip, além de ser reconhecido em praticamente todos os navegadores. Entretanto, é no uso de ferramentas javascript, como muitos frameworks jQuery o fazem, por exemplo, que o poder dessas tags está mais em evidência. É possível criar balões personalizados para serem exibidos em forma de tooltip, com definição de CSS, etc. deixando o código usado flexível e elegante.

Saiba mais...

Outra definição segue o conceito de que a serve para explicar um grupo de palavras enquanto o <abbr> define valores apenas para abreviações.

São bastante utilizados para passar o significado de uma sigla, como está exibido na Listagem 1 e 2. Os resultados no browser podem ser conferidos nas Figuras 1 e 2 respectivamente.

Listagem 1. Exemplo de uso da tag <acronym>



<acronym title=”Ministério da Educação”>MEC</acronym> veio ontem fazer vistoria na faculdade.
Resultado da Listagem 1 - Acronym
Figura 1 - Resultado da Listagem 1 - Acronym

Listagem 2. Exemplo de uso da tag <attr>



O <attr title=”Doutor”>Dr.</attr> Durval não compareceu à reunião.
Resultado da Listagem 2 - Attr
Figura 2 - Resultado da Listagem 2 - Attr

Tag <cite>

Todos já conhecem bem a tag <blockquote>, usada para guardar citações de outrem. Mas uma tag não tão comum se refere à referência da obra, citação, etc em questão. Ela basicamente permite que você defina o texto dentro do elemento como uma referência. Normalmente, o navegador irá tornar o texto dentro da tag <cite> em itálico, mas isso pode ser mudado com um toque de CSS.

A tag <cite> é realmente útil para citar referências bibliográficas e outros locais. Na Listagem 3 está um exemplo de como usar a tag <cite> em um parágrafo:

Listagem 3. Exemplo de uso da tag <cite>



<p>Minha citação famosa de... - Diogo Souza em <cite>Publicações de um Programador Web</cite>

Note na listagem acima a tag não trará muita alteração a não ser a colocação do termo em itálico. Além disso, o uso dessa tag nas suas páginas tratá benefícios no quesito ranking SEO para ferramentas de busca.

Tag <fieldset>

Essa tag é bem utilizada para definir uma melhor organização dos elementos de formulários dentro dos mesmos. Ao usá-la o browser renderizará uma borda ao redor do quadrado que representa o fieldset e em conjunto com a tag <legend> é possível adicionar um título ao quadro.

Na Listagem 4 é possível ver um exemplo de uso da tag com um formulário HTML. Note que o uso da tag <form> é dispensado para fins de redução de código. Veja o resultado na Figura 3.

Listagem 4. Exemplo de uso da tag <fieldset>



<fieldset>
  <legend>Fieldset de teste</legend>
  Nome: <input type=”text” name=”nome” /><br/>
  Endereço: <input type=”text” name=”endereco” /><br/>
  <input type=”submit” value=”Enviar”/>
</fieldset>
Resultado da Listagem 4 - Fieldset
Figura 3 - Resultado da Listagem 4 - Fieldset

Tag <optgroup>

A tag <optgroup> é uma ótima maneira de adicionar um pouco de definição entre os grupos de opções dentro de uma caixa de seleção, as famosas combobox’s. Para entender melhor, veja como ficaria organizada uma combo com níveis e subníveis meio a estilo das listas em HTML, na Listagem 5 tem um exemplo de organização de filmes pelos títulos.

Listagem 5. Exemplo de uso da tag <optgroup>



<select id="filmes" name="filmes">
<optgroup label="Terror">
<option value="serra_eletria">Massacre da Serra Elétrica</option> 
<option value="premonicao">Premonição 1</option> 
</optgroup> 
<optgroup label="Comédia">
<option value="auto_compadecida ">O Auto da Compadecida</option> 
<option value="friends">The Friends</option>
</optgroup> 
 </select>

Veja na Figura 4 o resultado do mesmo código. Atente para os espaços dados entre cada item da sublista.

Resultado da Listagem 5 - optgroup
Figura 4 - Resultado da Listagem 5 - optgroup
Tags e

Se você está querendo exibir edição revisões com a marcação, <ins> e <del> são apenas o bilhete de entrada. Como o nome indica, a tag <ins> destaca o que foi adicionado ao documento com um sublinhado, e a tag <del> mostra o que foi retirado com um tachado (Listagem 6).

Listagem 6. Exemplo de uso das tags <ins> e <del>



Este <del>era</del> é um <ins>exemplo de peso</ins>.

Confira na Figura 5 o resultado do texto para a Listagem 5.

Resultado da Listagem 6 - ins e del
Figura 5 - Resultado da Listagem 6 - ins e del

Tag <q>

A tag <q> tem uma finalidade bem interessante, porém pouco explorada, talvez em vista da ausência do português formal na grande maioria dos websites por aí. A tag é usada para citações incorporadas em um documento. O conceito é que o navegador deve cercar o texto com o(s) caracter(es) de aspas correto(s) para o idioma. Um navegador web também deve usar as marcas “quantion” próprias aninhadas.

Por exemplo, quando se faz necessário usar uma citação, as tags <blockquote> e <cite> se encaixam, além do uso das aspas. Porém, quando se faz necessário usar citações dentro de citações, ou falas de pessoas internas a uma outra fala, esta tag pode ser bem utilizada. Confira na Listagem 7 um exemplo claro disso.

Listagem 7. Exemplo de uso da tag <q>



<q>João disse: <q>Bom dia a todos! <q>Como?</q></q> retrucou Ana.</q>

O resultado desta mesma Listagem será:

Resultado da Listagem 7 - tag q
Figura 6 - Resultado da Listagem 7 - tag q

Obs.: O uso desta tag não resultará na inclusão das aspas como parte do HTML gerado. São apenas representações visuais.

Resumindo

Existem muitas outras tags que poderiam ser incluídas nessa lista. Se tiver interesse pesquise por tags como <wbr>, <adress>, <section>, <nav>, <footer>, <dl> <dt> e <dd>, <dfn> e algumas outras mais ou menos usadas. Infelizmente tratá-las aqui estenderia muito o artigo, então por que não comentar sobre as mesmas? Vai lá, posta alguma que não foi inclusa no artigo.

Links Úteis

Saiba mais sobre JavaScript ;)

  • Programando em HTML5:
    Ao ser anunciada a versão 5 do padrão HTML, inicialmente parte do mercado não recebeu com grande entusiasmo, acostumado a receber poucos recursos novos de uma versão para outra. A verdade é que, desde que a versão 4.0 foi lançada em 1997, poucos avanços aconteceram nos dez anos seguintes.
  • Comandos e tags HTML5:
    Se você precisa conhecer comandos, dicas e tags HTML5 acesse nosso conteúdo gratuito. Tudo sobre HTML5 você encontra no maior site para programadores do Brasil. Estude agora!
  • O que é o HTML5:
    Veja neste artigo um pouco da história do HTML, o que é o HTML5 e suas principais mudanças em relação às versões anteriores.