Você vai aprender agora novas tags do HTML5 que você não conhecia, vamos ver quais são e quais as suas funcionalidades.

<optgroup>

Separe as opções do elemento <select> por grupos.

<select>
  <optgroup label="frutas">
    <option>Maçã</option>
    <option>Banana</option>
  </optgroup>
  <optgroup label="Vegetais">
    <option>Espinafre</option>
    <option>Brócolis</option>
  </optgroup>
</select>

<del>

O Elemento del representa uma parte do texto que foi excluída de um documento.

<p><del>Hoje eu não quero estudar</del></p>

<output>

Use o output para injetar os resultados de um cálculo ou o resultado de uma ação do usuário.

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  0<input type="range" name="b" value="50" />100 +<input
    type="number"
    name="a"
    value="10"
  />
  = 90
  <output name="result"></output>
</form>

<datalist>

Crie um menu dropdown com autocomplete usando HTML.

<input list="frutas" />
<datalist id="frutas">
  <option value="Laranja"></option>
  <option value="Uva"></option>
  <option value="Melancia"></option>
</datalist>

<progress>

Crie uma barra de progresso usando apenas HTML nativo.

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

<details>

Crie elementos adicionais que aparecem e somem ao clicar.

<details>
  <summary>BLOG SOARESDEV</summary>
  <p>Este blog é incrível</p>
</details>

Bonus

Adicionando um link de download apenas com HTML

Você pode fazer isso com um único atributo, o atributo de download diz que o arquivo especificado no href irá ser baixado quando o usuario clicar no link.

O valor posto no atributo de download irá ser o novo nome do arquivo após ser baixado.

<a href="image/ferrari.png" download="carro.png">Download</a>

Gostou do conteúdo? então salva nosso blog ai nos favoritos e acompanhe nossas postagens, vamos trazer ainda mais conteúdos bons relacionado ao desenvolvimento web.