Você deveria estar usando esses 8 elementos HTML no seu site

Por Sérgio Oliveira
photo_camera isak55

Houve um tempo em que todo mundo conseguiria fazer uma página web, ou até mesmo sites inteiros, sem ter conhecimento algum de HTML. É verdade que isso é possível até hoje, mas as ferramentas e os requisitos para um site ser bem sucedido na internet mudaram.

Hoje, por exemplo, muito se ouve sobre semântica, motores de busca, SEO e uma infinidade de outros termos e teorias para tornar um site mais amigável aos mecanismos de indexação de conteúdo do Google e de todos os demais buscadores. Mas, afinal de contas, o que isso tudo quer dizer?

Ao contrário do que acontecia antigamente, o HTML semântico expressa não apenas o significado do documento, como também descreve o que ele é e ajuda a pessoas e robôs a entenderem o conteúdo e o seu contexto apenas observando o código fonte. Além disso, a marcação semântica é amigável ao SEO, trabalha melhor em browsers modernos e reduz a quantidade de código necessária para expressar o conteúdo, aumentando a clareza do código para outras pessoas que por ventura precisem lê-lo.

Fazer isso é bastante simples e basta deixarmos de lado algumas tags HTML genéricas que aprendemos a usar com editores como Microsoft FrontPage ou Adobe Dreamweaver, por exemplo, e começarmos a sermos mais específicos ao utilizar elementos mais expressivos. Abaixo, listamos oito exemplos que você pode começar a utilizar hoje mesmo. Confira:

8. abbr

A tag abbr é usada para abreviações. Portanto, se você está escrevendo um documento com várias abreviações, poderá atribuir a elas títulos que contêm a versão não abreviada do texto. Veja o exemplo abaixo:

7. menu

Quem nunca fez uma marcação de menu como uma lista não-ordenada?

Pois bem, agora você pode parar com isso e usar um elemento próprio para a ocasião: o menu. Além de representar uma lista não-ordenada de comandos, ele ainda tem um atributo type que pode ser definido para popup ou toolbar.

6. q

Assim como a tag blockquote, a tag q é usada para fazer citações de texto num documento HTML.

Diferente do que você pode pensar, usar apenas as aspas não é suficiente – os motores de busca não sabem que aquele trecho entre aspas em específico é uma citação. Ao invés disso, ele procura por essas duas tags para saber quando você realmente citou algo e deixou isso claro o suficiente no seu código fonte.

5. mark

Quem nunca estilizou uma tag span para destacar uma porção de texto que atire a primeira pedra!

Com a introdução do elemento mark no HTML5, fazer essa gambiarra não é mais necessário. Esta tag representa exatamente um texto que foi grifado com propósito referencial devido à sua importância em outro contexto. Além de funcionar perfeitamente semanticamente, você também pode estilizá-la para dar aquela destacada no texto.

Portanto, pare de fazer isto:

E passe a fazer isto aqui:

4. time

Se há uma coisa desorganizada neste mundo, esta coisa definitivamente é a localização de datas. Tome por exemplo a data 25 de dezembro de 2014. No Brasil, esta data é representada por 25/12/2014. Nos Estados Unidos é 12/25/2014. Na Holanda, por sua vez, a mesma data é 25-12-2014 e assim vai. As possibilidades são inúmeras e cada país representa a data da maneira mais conveniente para si. Não é difícil de imaginar que isso dificulta, e muito, a leitura correta desse dado por máquinas, certo?

E é aí que surge a tag time, que permite representar horas e datas em um formato compreensível pela máquina. Utilizando-a, o exemplo acima seria escrito como:

A partir dai, um parser HTML usa a tag para determinar a hora exata que você quer, independentemente do formato. Caso haja necessidade, você também pode usar um formato de 24 horas, como no exemplo a seguir:

3. input

OK, essa tag não é exatamente nova, mas ela ganhou uma variedade de novos tipos com o HTML5. Entre elas:

  • email: campo de endereço de e-mail;
  • tel: para definir um campo de número telefônico;
  • number: campo somente numérico;
  • range: permite percorrer por números dentro de um intervalo estabelecido;
  • time: campo estilizado para definição de hora;
  • search: caixa de buscas padrão;
  • color: abre a caixa de seleção de cores do navegador.

Embora os novos tipos de input sejam ótimos, nem todos eles são suportados pelos navegadores. Antes de implementá-lo no seu site, certifique-se disso.

2. i e b

Nos primórdios da web, as tags i e b eram usadas para identificar itálicos e negritos. Contudo, com o passar do tempo e com o surgimento do conteúdo semântico, usá-las se tornou algo mal visto pelos especialistas, que passaram a dizer que elas representam apenas a forma como o texto é mostrado ao invés do que ele realmente significa. E foi aí que elas foram substituídas pelas tags em e strong, que indicam texto "enfatizado" e "fortemente enfatizado", respectivamente.

As coisas permaneceram assim até o surgimento do HTML5, que deu um significado totalmente novo às tags i e b. Agora, a i, por exemplo, é usada para texto que está em um tom diferente. Também serve para destacar termos técnicos e pensamentos. A b, por outro lado, identifica um texto que tem um estilo diferente do normal, mas não uma diferença semântica.

Comparando esta última ao span, a diferença é que o b comunica aos robôs uma falta de sentido semântico.

1. nbsp

Praticamente todos os desenvolvedores já viram ou usaram nbsp, mas poucos sabem para que ela realmente serve: para definir um espaço não-quebrável. E o que isso significa?

Sabe quando, ao fim de uma sentença, aquelas duas palavras separadas por um espaço deveriam ficar juntas a todo custo e não ficam? Pois bem, o nbsp serve para deixá-las juntas e evitar que uma nova linha as separe.

Veja os exemplos:

  • Unidades de tempo/medida: 25 m/s
  • Tempo: 12 PM
  • Nomes Próprios: Sergio Oliveira

Em nenhum desses casos seria bacana separar a primeira porção do texto da segunda no fim de uma linha, certo? Manualmente, você espreme sua letra para garantir isso; no HTML, você usa nbsp.

É claro que essas dicas e exemplos não cobrem nem 10% do que o HTML está se tornando. Cada vez mais semântico, seus elementos vêm ganhando novos significados e as marcações estão cada vez mais limpas e acessíveis.

Se você se interessa pelo assunto, é possível se aprofundar mais ainda acessando a documentação da Mozilla Developer Network ou, para os mais corajosos, as especificações da W3C.

Fique por dentro do mundo da tecnologia!

Inscreva-se em nossa newsletter e receba diariamente as notícias por e-mail.