Na web de hoje, a palavra semântica tem sido usada a torto e a direito. Mas o que ela realmente quer dizer? Por que é importante?

HTML semântico expressa o significado do documento. É menos sobre como o texto parece e mais sobre o que ele é. Uma boa marcação semântica ajuda tanto às pessoas como aos robôs a entenderem o conteúdo e o seu contexto.

Marcação semântica é muito mais acessível e fácil para leitores de tela interpretarem. É amigável ao SEO. Trabalha melhor em browsers modernos. Reduz a quantidade de código necessária para expressar o conteúdo e aumenta a clareza do código para outras pessoas que o precisem ler.

Ok, então conteúdo semântico é ótimo, mas como se usa isso? Uma das formas ideais para começar a escrever marcações melhores é deixar de lado as tags genéricas e usar, no lugar, elementos mais expressivos. Veja aqui oito deles, que você pode usar para melhorar o seu jogo.

<q>

Assim como o seu “primo” <blockquote>, a tag <q> é usada para fazer citações de texto.

Por que não usar apenas aspas? Porque elas nem sempre indicam uma citação. Elas podem ser usadas para ênfase, ironia, ou para identificar o nome de algo. Nesses casos, as aspas usadas diretamente no conteúdo são muito válidas. No entanto, se você está citando alguém, <q> deixa o que você quer falar totalmente claro.

<i> e <b>

No passado, <i> e <b> eram usados para identificar itálicos e negritos. Quando a ideia de separar o conteúdo semântico da apresentação começou a ganhar um impulso, usar <i> e <b> se tornou algo mal visto porque eles representam como o texto será mostrado, em vez do que eles significam. Eles foram substituídos por <em> e <strong>, que indicam um texto “enfatizado” e “fortemente enfatizado”.

Com o HMTL5, <i> e <b> agora têm uma representação semântica totalmente nova. A tag <i> é usada para texto que está em um tom diferente. É útil para coisas como pensamentos e termos técnicos. A tag <b> identifica texto que tem um estilo diferente do texto normal, mas não uma diferença semântica. De que forma é diferente de usar o <span>? O ponto chave é que o <b> comunica uma falta de sentido semântico.

<abbr>

<abbr> é usado para abreviações! Pode ser muito útil em documentos com várias abreviações, e ainda há um atributo opcional de título que contém a versão não abreviada do texto.

<abbr title="laugh out loud">lol</abbr>
<abbr title="I don't know">idk</abbr>
<abbr title="got to go">g2g</abbr>
<abbr title="talk to you later">ttyl</abbr>

<time>

Vamos observar um problema clássico de localização: datas. Nos EUA, por exemplo, 5 de outubro de 2013 é representado por 10/05/13. No Reino Unido, é 05/10/2013. Na Holanda, seria escrito assim: 05-10-13; na África do Sul, 2013/10/05 e na Rússia é 05.10.13. Com tantas possibilidades, é difícil para uma máquina ler corretamente as datas em todas essas diferentes localidades.

A tag <time> permite que você represente horas e datas em um formato compreensível pela máquina. O exemplo acima poderia ser escrito como <time datetime=”2013-10-05″>10/05/13</time>. Um parser HTML pode usar isso para determinar a hora exata que você quer, independentemente do format. A tag <time>  também permite usar um formato de 24 horas: <time datetime=”2013-10-05 22:00″>10/05/13 at 10 PM</time>;

<mark>

Você já fez algo assim?

<p>
  Trezentas páginas de um texto chato e inútil. <span class="highlight">A única coisa que você precisa mesmo saber e nunca mais vai achar se não grifar.</span> Mais texto chato.
</p>

Bom, agora você não precisa mais fazer isso. O HTML5 introduziu o elemento <mark>, que representa texto que foi grifado com um propósito referencial devido à sua importância em outro contexto.

<input>

Sim, <input>. Provavelmente você já usou <input type=”text”>, <input type=”submit”> e talvez até mesmo <input type=”hidden”>, mas e as outras formas? Com HTML5 os <input> podem ser usados com uma variedade de tipos, incluindo:

• email
• tel
• number
• range
• date
• time
• search
• color

Eles são ótimos, mas garanta que estão de acordo com os requerimentos do seu browser. Alguns tipos ainda não são suportados por todos os grandes navegadores.

<menu>

Você já fez uma marcação de menu com uma lista não-ordenada?

<ul class="menu-toolbar">
  <li class="new">New</li>
  <li class="open">Open</li>
  <li class="save">Save</li>
  <li class="quit">Quit</li>
</ul>

Bem, pare com isso! A tag menu tem exatamente esse propósito. O elemento <menu> representa uma lista não-ordenada de comandos. Ele tem um atributo type, que pode ser setado para popup ou toolbar.

<menu type="toolbar">
  <li class="new">New</li>
  <li class="open">Open</li>
  <li class="save">Save</li>
  <li class="quit">Quit</li>
</menu>

Bônus

A maioria dos desenvolvedores front end já usaram &nbsp; quando escrevendo HTML, mas muitos não sabem o real significado disso. Um espaço não-quebrável não vai quebrar em uma nova linha, então esses dois mundos ficarão juntos ao final de uma sentença. Isso é útil quando a quebra de palavras parece ser disruptiva. Alguns ótimos exemplos:

• Unidades de tempo/medida: 12 m/s
• Tempo: 8 PM
• Nomes Próprios: Dairy Queen

Além disso, tenha certeza de ver também o hífen sem quebra (‑), que permite que você utilize um caractere de hífen, sem quebrar a linha.

Resumindo tudo

HTML está se tornando mais semântico a cada dia. Usar esses elementos é uma ótima forma de começar marcações mais limpas e acessíveis. Para ver todas as opções disponíveis, veja a Tabela Períodica de Elementos, a documentação da Mozilla Developer Network, ou, se você estiver com coragem, a especificação de HTML do W3C. Divirta-se!

***

Artigo traduzido pela Redação iMasters, com autorização do autor. Publicado originalmente em http://davidwalsh.name/8-html-elements