Se você é um desenvolvedor Web que faz o seu dever de casa, já deve estar cansado de saber que o HTML/XHTML serve para estruturar o conteúdo de uma página Web. Sendo assim, você usa elementos como p para parágrafos, h1, h2, h3, h4, h5 e h6 para títulos, ol para listas ordenadas, entre outros igualmente populares. No entanto, existem alguns outros elementos com tanto valor semântico quanto estes, mas que são bem menos conhecidos. Veja alguns destes abaixo:

address

O elemento address define um conteúdo como uma informação de contato do autor ou dono da página Web.

  Avenida Expedicionário José Amáro, número 500, Apartamento 13, Vila São Luís,
  Duque de Caxias/RJ.

del

Tem a função de marcar um texto que foi removido da página.

<p>
  O Jogo Final Fantasy XIII é a continuação da famosa saga de RPG da Square
  ,sendo o seu lançamento exclusivo para o Playstation 3.
</p>

ins

Especifica um texto que foi inserido no documento, sendo muitas vezes usado em conjunto com o elemento del, como forma de corrigir uma informação anterior.

  <p>
    A atual versão do Rails é a 2.22.3.2.
  </p>

abbr

O elemento abbr serve para marcar um texto que é a forma abreviada de uma frase ou de uma expressão composta, ou seja, ele marca abreviações. Adicionalmente, é bom utilizar o atributo title neste elemento para especificar a palavra ou frase inteira que está sendo abreviada. Além disso, é válido mencionar que este elemento não é suportado pelo Internet Explorer 6.

  <p>
    O <abbr title = "EXtensible HyperText Markup Language">XHTML</abbr> deve ser
    usado para estruturar o conteúdo.
  </p>

acronym

Este elemento tem a função semântica de identificar acrônimos, que são um tipo especial de abreviação, onde cada letra do acrônimo corresponde à primeira letra de uma das palavras da expressão ou frase abreviada.

<p>
  Para definir a apresentação de uma página Web você deve usar o
  <acronym title = "Cascading Style Sheets">CSS</acronym>.
</p>

cite

Define o autor ou a fonte de uma citação, podendo, e devendo, ser usado em conjunto comos elemento q e blockquote, que identificam a citação em si.

<p>
  Conforme Martin Fowler disse:
</p>

<blockquote>
  <p>
    Any fool can write code that a computer can understand.
    Good programmers write code that humans can understand.
  </p>
</blockquote>

dl, dt e dd

Estes elementos são usados para criar listas de definição em uma página Web, sendo muito usados, por exemplo, para a criação de FAQs. O elemento dl representa a lista em si, enquanto os elementos dt e dd representam o termo a ser definido e a sua definição, respectivamente.

<dl>
  <dt>Ruby</dt>
  <dd>Linguagem de script orientada a objetos e criada por Yukihiro Matsumoto.</dd>

  <dt>Ruby on Rails</dt>
  <dd>Framework Web desenvolvido com a linguagem de programação Ruby</dd>

  <dt>ActiveRecord</dt>
  <dd>Um dos principais sub-frameworks do Ruby on Rails</dd>
</dl>

dfn

O elemento dfn é utilizado para marcar um termo que está sendo definido, sendo que pode-se usar o atributo title para resumir a sua definição. A diferença entre o dfn e uma lista de definição, é que o primeiro é utilizado para marcar uma definição isolada no texto, enquanto o segundo agrupa várias definições em uma lista.

<p>
  O <dfn title = "Framework Ruby">Merb</df> é um framework Web escrito em Ruby.
</p>

Conclusão

Existem muitos elementos no XHTML/HTML além daqueles que são amplamente conhecidos, e uma vez que estes elementos adicionais são mais precisos quanto à semântica do seu conteúdo, não há porquê não usá-los. Dessa forma, suas páginas Web ficarão mais corretas semanticamente, o que significa uma maior acessibilidade.

Além disso, não se limite aos elementos extras mostrados aqui, uma vez que a idéia deste post era apenas mostrar através de exemplos que quase sempre há um elemento mais preciso para marcar o seu conteúdo. Portanto, quando tiver dúvidas se está usando o elemento correto em sua página Web, pesquise pare descobrir se não há uma opção mais adequada.

Por fim, embora alguns destes elementos possuam um estilo padrão definido pelo browser, a regra de ouro continua valendo, ou seja, para definir a apresentação deles você deve usar o CSS.

O Firefox é um navegador muito bacana, muito legal. Eu o respeito muito por ser o principal responsável por roubar fatia de mercado do Internet Explorer. Mas tem uma coisa que me irrita muito nele: o outline obrigatório que ele coloca nos links e botões.

A maldição do outline no firefox

Veja a imagem acima. Se você usa o Firefox, com certeza já viu esse pontilhado ao redor de algum botão. Sabe por que eu o odeio? Porque ele é obrigatório. Não dá pra tirar. Na verdade, até dá pra tirar o outline dos links, mas caso use <input type=”submit”> ou <button> o seu botão vai ter o pontilhado ao redor e não tem nada que você possa fazer.

Só pra constar: Esse outline no firefox não é um bug! Esse marcador é colocado ao redor dos elementos por motivos de usabilidade. A idéia é sempre indicar visualmente onde está o foco. Aí o problema vem quando eu mesmo quero implementar uma forma diferente de indicar o foco, porque ele me obriga a continuar com o outline.

Outro dia eu estava trabalhando no meu projeto secreto com os outros fundadores do blog, e queria fazer um botão super bonito. Eu usei a tag <button> pra poder inserir imagens e texto lá dentro, pra criar um botão tão maneiro que seus olhos explodiriam de prazer. Depois de um tempão criando o botão, me deparei com o outline do firefox, que acabou com todo o mojo.

Sério, um quadrado pontilhado estraga completamente aquele botão super bonito, arredondado, com degradê e efeitos de mouse over.

Se você também se irrita com isso, fique feliz porque você pode pelo menos impedir que o outline apareça nos seus links. Basta declarar o seguinte no CSS para os seus links:

a {
    outline: none;
}

Isso não funciona nos submits e buttons, entretanto. Não adianta nem tentar.

Ah, e se você procurar bastante na internet vai ter algum super gênio por aí sugerindo usar um código em javascript que tira o outline dos botões. Não faça isto em hipótese alguma! O que essa solução em javascript faz é tirar instantaneamento o foco do botão assim que ele recebe foco. Fazendo isso o usuário não pode manusear seu formulário (ou seu botão) pelo teclado, não pode chegar ao seu botão apertando TAB. Ou seja, fica uma porcaria.

Esse tipo de coisa acaba forçando o desenvolvedor a fazer algo totalmente não semântico, como usar <a> pra criar o seu botão de submit, só pra se livrar do outline. Algumas vezes essas bobeiras do navegador vão tão longe que até o google acabou usando <div> pra criar os “botões” que ele usa hoje em dia no Google Reader e no GMail. Pode ir lá olhar, é div!

Até onde eu sei, apenas o Firefox tem essa obsessão por outline. Espero que desistam disso em versões futuras. Na 3.5, quem sabe.

Olá, seja bem-vindo. Fique à vontade e puxe uma cadeira. Estamos começando agora o Not For Dummies, o mais novo blog sobre desenvolvimento de software do Brasil. Mas não queremos ser apenas mais um.

Existem vários outros blogs sobre desenvolvimento por aí, eu sei. Mas todos eles acabam sendo muito parecidos. A maioria dos blogs por aí escreve sobre os primeiros passos no desenvolvimento, e só. Uau, maravilha! Quem procura informações de como fazer um hello world em PHP, ou como instalar o Ruby on Rails no Windows vai achar um monte de fontes, mas e quando a pessoa precisa de uma coisa um pouco mais avançada em português?

Quantidade de Hello World = 0

O Not For Dummies vai fazer jus ao nome. Não vamos cair no lugar-comum, não vamos ficar escrevendo os mesmos posts básicos. Nossos textos não são for dummies, não são pro novato que nem sabe direito o que é XHTML. Isso não quer dizer que só quem é expert vai nos entender, claro. Mas você precisa ao menos já ter se iniciado pra entender do que a gente está falando. Falando assim parece até coisa de sociedade secreta.

O blog vai ser mantido por vários escritores diferentes. Nós reunimos um bom time de escritores e ainda planejamos aumentar a equipe em breve. Outra coisa é que o blog vai ser escrito de uma forma bem descontaída, sempre que possível. Talvez a gente até coloque uma piada no meio de uma explicação séria, só pra não ficar chato.

Acreditem em mim nisso: acompanhem o blog e vocês vão gostar. Eu agarantio!