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 Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series