É 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 exibidamedia
: aceita qualquer media query válidasizes
: 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 larguratype
: 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.