HTML5 tags desconhecidas

Existem tags do html5 com funcionalidades incríveis que você pode não conhecer, descubra quais são.

Github Copilot 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>

resultado-optgroup

<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>

resultado-del

<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>

resultado-del

<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>

resultado-del

<progress>

Crie uma barra de progresso usando apenas HTML nativo.

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

resultado-del

<details>

Crie elementos adicionais que aparecem e somem ao clicar.

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

resultado-del

Bonus

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.