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

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.

Participe do nosso GRUPO CANALTECH DE DESCONTOS do Whatsapp e do Facebook e garanta sempre o menor preço em suas compras de produtos de tecnologia.

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.

Gostou dessa matéria?

Inscreva seu email no Canaltech para receber atualizações diárias com as últimas notícias do mundo da tecnologia.