# 10 elementos HTML que você não sabia que precisava
> Descubra 10 elementos HTML poderosos que você não sabia que precisava. Aprenda audio, picture, progress, details e tags para aplicações acessíveis. Use!
URL: https://dpw.dev/acessibilidade/10-elementos-html-que-voce-nao-sabia-que-precisava/
Publicado em: 2019-06-17
Categoria: acessibilidade
Autor: Tárcio Zemel
É 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!
> Artigo baseado em [10 HTML Elements You Didn't Know You Needed](https://dev.to/emmawedekind/10-html-element-you-didnt-know-you-needed-3jo4).
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 `` define um som, como músicas ou outros fluxos de áudio. Existem três formatos de arquivos suportados atualmente: MP3, WAV e OGG.
[Exemplo no CodePen](https://codepen.io/anon/pen/KEeGvP)
## Blockquote
A tag `` especifica uma seção que é citada de outra fonte.
[Exemplo no CodePen](https://codepen.io/anon/pen/eXKPeZ)
# Output
A tag `` 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.
[Exemplo no CodePen](https://codepen.io/anon/pen/zbamRN)
## Picture
A tag `` 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 `` contém duas tags diferentes: um ou mais elementos `` e um elemento `` 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
> **Dica:** Para uma explicação mais detalhada, leia nosso artigo: [Imagens responsivas
> com srcset e sizes](/css/imagens-responsivas-srcset-sizes/).
O navegador usa os valores de atributo para carregar a imagem mais apropriada; ele usa o primeiro elemento `` e ignora os elementos de origem subseqüentes. A tag `` corresponder (match).
## Progress
A tag `` representa o progresso de uma tarefa.
A tag `` não substitui a tag `` (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 ``.
[Exemplo no CodePen](https://codepen.io/anon/pen/jJKepE)
## Meter
A tag `` 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 `` para exibir estatísticas de uso do disco ou para indicar a relevância dos resultados de busca.
A tag `` não deve ser usada para indicar o progresso de uma tarefa; esses tipos de componentes devem ser definidos por um elemento `` (visto acima).
[Exemplo no CodePen](https://codepen.io/anon/pen/wOXYYL)
## Template
Certamente, na lista desses **10 elementos HTML que você não sabia que precisava**, `` pode ser um que você talvez nem sabia que existia...
A tag `` 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 `` 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".
[Exemplo no CodePen](https://codepen.io/anon/pen/moKzva)
## Video
A tag `` especifica um clipe de filme (_movie clip_) ou fluxo de vídeo (_video stream_).
Os formatos suportados incluem MP4, WebM e Ogg.
[Exemplo no CodePen](https://codepen.io/anon/pen/ywERrJ)
## Word Break Opportunity (wbr)
Desses **10 elementos HTML que você não sabia que precisava**, talvez o `` 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 `` 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.
[Exemplo no CodePen](https://codepen.io/anon/pen/MxXPMb)
## 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.
---
Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml