Tags HTML pouco usadas

Precisa de um autocomplete? O HTML tem!

Precisa de um gauge para mostrar algum valor? O HTML tem!

Precisa de um collapse sem ser bootstrap? O HTML também tem!

Nesse breve resumo vou listar algumas tags que são raramente usadas ou até mesmo desconhecidas e que, na hora da construção de um blog, site ou até mesmo landing page pode ser de grande valia.

Datalist

A nossa primeira tag é datalist. Nada mais é do que um lista de opções que são atreladas a um input, e ao digitar, as opções são sugeridas numa espécie de autocomplete.

<form>
  <input list="browsers" name="browser" placeholder="Browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Safari">
  </datalist>
</form>

Progress

A nossa próxima tag é a progress. Sem tempo ou habilidade para fazer uma barra de progresso estilosa? Usa a do HTML mesmo!

<progress value="50" max="100"></progress>
<progress></progress>

Meter

Quero mostrar uma lista de habilidades e ter um gauge bonitinho.

<label for="meter">HTML</label>
<meter value="10" min="1" max="10" id="meter">10 de 10</meter>


<label for="meter">Javascript</label>
<meter value="8" min="1" max="10" id="meter">8 de 10</meter>

Details

Preciso de um collapse mas não quero usar Boostrap. O que eu faço? O HTML já tem isso!!! =D

 <details>
   <summary>Lista de linguagens</summary>
   <dt>
     <dd>Javascript</dd>
     <dd>Python</dd>
     <dd>Reust</dd>
   </dt>
 </details>

Uma coisa do details é que a tag summary vai ser o nosso cabeçalho e todo o restante vai ser o body do collapse. Sabe as tags fieldset e legend? Pois vai funcionar exatamente assim.

Tem umas outras bem bacaninhas como o map por exemplo.

Dá uma olhada lá no repo que eu disponibilizei. Vai ter essas e outras bem legais também! =D