É comum escutar e ler por aí que “HTML é fácil”. Eu mesmo já vi alegações de que é possível dominar o HTML em 1 semana… Quando escutar absurdos como esse, lembre-se desses 10 elementos HTML que você não sabia que precisava!

Embora seja passível de acordo que HTML talvez seja mais fácil de aprender em relação a outros tipos de linguagem, afirmações como essa beiram o absurdo — ou a ignorância?

HTML é uma poderosa linguagem de marcação que pode ser usada para fornecer a estrutura de nossos site e apps Web e fornecer poderosos benefícios de acessibilidade — quando usados adequadamente.

Então, veja a seguir 10 elementos HTML que (talvez) você não sabia que precisava, na esperança de poder criar aplicativos Web mais acessíveis e estruturalmente sólidos.

Audio

A tag <audio> define um som, como músicas ou outros fluxos de áudio. Existem três formatos de arquivos suportados atualmente: MP3, WAV e OGG.

See the Pen Audio Element by Emma Wedekind (@emmawedekind) on CodePen.

Blockquote

A tag <blockquote> especifica uma seção que é citada de outra fonte.

See the Pen Blockquote Element by Emma Wedekind (@emmawedekind) on CodePen.

Output

A tag <output> representa o resultado de um cálculo. É possível usar o sinal de mais e o símbolo de igual para indicar que o primeiro e o segundo valores de entrada devem ser “enviados” para o tag de saída; você pode denotar isso com um atributo for contendo os IDs dos dois elementos a serem combinados.

See the Pen Output Element by Emma Wedekind (@emmawedekind) on CodePen.

Picture

A tag <picture> permite especificar fontes de imagem. Em vez de ter uma imagem que você escala para cima e para baixo, dependendo da largura da viewport, várias imagens podem ser indicadas para preencher a viewport.

A tag <picture> contém duas tags diferentes: um ou mais elementos <source> e um elemento <img>.

O elemento <source> possui os seguintes atributos:

• srcset (obrigatório): define o URL da imagem a ser exibida
• media: aceita qualquer media query válida
• sizes: define um valor de largura única, uma media query com valor de largura ou uma lista separada por vírgulas de media queries com um valor de largura
• type: define o tipo MIME.

O navegador usa os valores de atributo para carregar a imagem mais apropriada; ele usa o primeiro elemento <source> e ignora os elementos de origem subseqüentes. A tag <img> é usada para fornecer compatibilidade com versões anteriores se um navegador não suportar o elemento ou se nenhuma das tags <source> corresponder (match).

Progress

A tag <progress> representa o progresso de uma tarefa.

A tag <progress> não substitui a tag <meter> (que será mostrada a seguir), portanto, os componentes que indicam o uso do espaço em disco ou a relevância do resultado da consulta devem usar a tag <meter>.

See the Pen Progress Element by Emma Wedekind (@emmawedekind) on CodePen.

Meter

A tag <meter> define uma medida escalar dentro de um intervalo definido ou um valor fracionário. Você também pode se referir a essa tag pelo nome “gauge” (“medidor”).

É possível usar a tag <meter> para exibir estatísticas de uso do disco ou para indicar a relevância dos resultados de busca.

A tag <meter> não deve ser usada para indicar o progresso de uma tarefa; esses tipos de componentes devem ser definidos por um elemento <progress> (visto acima).

See the Pen Meter Element by Emma Wedekind (@emmawedekind) on CodePen.

Template

Certamente, na lista desses 10 elementos HTML que você não sabia que precisava, <template> pode ser um que você talvez nem sabia que existia…

A tag <template> contém conteúdo que está oculto ao usuário, mas que será usado para instanciar código HTML repetidamente.

Usando JavaScript, é possível renderizar esse conteúdo com o método cloneNode().

Time

A tag <time> define uma data ou hora legível por humanos (human-readable). Pode ser usado para codificar datas e horas de maneira legível por máquinas (machine-readable), de modo que os agentes do usuário (UAs) possam adicionar lembretes de aniversários ou eventos agendados à agenda do usuário.

Além disso, isso permite que os mecanismos de busca produzam resultados de pesquisa “mais inteligentes”.

See the Pen Time Element by Emma Wedekind (@emmawedekind) on CodePen.

Video

A tag <video> especifica um clipe de filme (movie clip) ou fluxo de vídeo (video stream).

Os formatos suportados incluem MP4, WebM e Ogg.

See the Pen Video Element by Emma Wedekind (@emmawedekind) on CodePen.

Word Break Opportunity (wbr)

Desses 10 elementos HTML que você não sabia que precisava, talvez o <wbr> seja o que os desenvolvedores menos usam, ou, arriscaria, sequer conhecem sua existência!

Se você tiver um longo bloco de texto ou uma palavra longa, poderá usar a tag <wbr> para especificar onde, em um corpo de texto, seria ideal quebrar.

Essa é uma maneira de garantir que o navegador, ao redimensionar, não quebre seu texto em um ponto estranho.

See the Pen Word Break Element by Emma Wedekind (@emmawedekind) on CodePen.

Conclusão

Apesar de existirem os que dizem ser possível dominar o HTML em pouquíssimo tempo, a verdade é que isso é pouco provável.

Saber usar corretamente, semanticamente, conscientemente, as tags de HTML, leva tempo. Fora o fato de que a linguagem é “viva” e está sempre evoluindo e sendo modificada.

A brincadeira no título — 10 elementos HTML que você não sabia que precisava — foi para deixar claro que você precisam sim estar sempre atento ao que HTML pode ofercer e usar isso corretamente.