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:
- 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 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