DEV Community

Cover image for Tags HTML pouco usadas
.·. Felipe Paz .·.
.·. Felipe Paz .·.

Posted on

1 1

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Image of Bright Data

Ensure Data Quality Across Sources – Manage and normalize data effortlessly.

Maintain high-quality, consistent data across multiple sources with our efficient data management tools.

Manage Data

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay