HTML5
Categorias

10 recursos HTML5 úteis que você pode não estar usando

O HyperText Markup Language nos acompanha desde os primórdios da web. É o seu tijolo mais básico. Podem surgir novas tecnologias, plugins, frameworks, conteúdo rico, mas o bom e velho HTML continua sendo a base de tudo e aprender seus mais profundos nuances é fundamental para os desenvolvedores.

O HTML5 é a implementação atual da linguagem, que causou furor em seu lançamento, com tantas novidades em relação ao padrão anterior, mas agora ele se mesclou ao pano de fundo e parece não ter mais a mesma importância. Isso é um erro: ainda existem segredos a serem desvendados, assim como recursos que acabaram sendo esquecidos mas continuam práticos.

Tapas Adhikary é um desenvolvedor indiano com mais de 15 anos de experiência em Engenharia de Software, que compartilha seu conhecimento sempre que possível. Em um artigo publicado na internet, ele mostra 10 propriedades e recursos escondidos no HTML5 que podem ser muito úteis em diversos projetos, mas poucas pessoas lembram.

Tapas Adhikary

Com sua autorização, traduzimos e reproduzimos o artigo na íntegra:

“HTML5 não é uma coisa nova. Temos usado vários recursos desde o lançamento inicial (janeiro de 2008). Como parte da iniciativa # 100DaysOfCode, observei de perto a lista de recursos HTML5 novamente. Veja o que eu encontrei? Eu realmente não usei muito até agora!

Neste artigo, estou listando dez desses recursos HTML5 que não usei muito no passado, mas os considero úteis agora. Eu também criei um fluxo de exemplo de trabalho e hospedado no Netlify. Espero que você ache útil também.

Ótimo, então vamos começar com a explicação, o código e dicas rápidas sobre cada um deles. Você pode me seguir no Twitter para ver meus artigos e trabalhos futuros.

1) Tag details

A tag <details> fornece detalhes sob demanda ao usuário. Se você precisar mostrar conteúdo ao usuário sob demanda, use esta tag. Por padrão, o widget está fechado. Quando aberto, ele se expande e exibe o conteúdo interno.

A tag <summary> é usada com <details> para especificar um título visível para ela.

Código:

Click Here to get the user details
# Name Location Job
1 Adam Huston UI/UX

Veja funcionando:

Você pode mexer com a tag aqui: https://html5-tips.netlify.app/details/index.html

Dicas rápidas:

Use-o no ReadMe do GitHub para mostrar as informações detalhadas sob demanda. Aqui está um exemplo de como escondi uma lista enorme de propriedades do componente de React e a mostrei apenas sob demanda. Legal certo?

2) Conteúdo editável

contenteditable é um atributo que pode ser definido em um elemento para tornar o conteúdo editável. Funciona com elementos como DIV, P, UL, etc. Você deve especificá-lo como <element contenteditable = “true | false”>.

Observação: quando o atributo contenteditable não é definido em um elemento, ele será herdado de seu pai.

Código:

Shoppping List(Content Editable)

  • 1. Milk
  • 2. Bread
  • 3. Honey

Veja funcionando:

Você pode mexer com a propriedade aqui: https://html5-tips.netlify.app/content-editable/index.html

Dicas rápidas:

Um elemento span ou div podem ser editados com esse atributo e você pode adicionar qualquer conteúdo avançado usando o estilo CSS. Isso será muito melhor do que lidar com campos de entrada. Experimente!

3) Mapa de imagem

A tag <map> ajuda a definir um mapa de imagem. Um mapa de imagem é uma imagem com uma ou mais áreas clicáveis dentro dela. A tag do mapa acompanha uma tag <area> para determinar as áreas clicáveis. As áreas clicáveis podem ser qualquer uma dessas formas, retângulo, círculo ou região poligonal. Se você não especificar nenhuma forma, ele considera a imagem inteira.

Código:

Circus

Veja funcionando:

Você pode mexer com a tag aqui: https://html5-tips.netlify.app/map/index.html

Dicas rápidas:

O mapa de imagem tem suas próprias desvantagens, mas você pode usá-lo para apresentações visuais. Que tal experimentar com uma foto de família e detalhar a foto do indivíduo (talvez as antigas que sempre apreciamos!).

4) Marcação de conteúdo

Use a tag <mark> para destacar qualquer conteúdo de texto.

Código:

Did you know, you can "Highlight something interesting" just with an HTML tag?

Veja funcionando:

Você pode mexer com a tag aqui: https://html5-tips.netlify.app/mark/index.html

Dicas rápidas:

Você sempre pode alterar a cor de destaque usando css:

mark {
  background-color: green;
  color: #FFFFFF;
}

5) data-* attribute

Os atributos data- * são usados para armazenar dados personalizados privados para a página ou aplicativo. Os dados armazenados podem ser usados no código JavaScript para criar mais experiências do usuário.

Os atributos data- * consistem em duas partes:

  • O nome do atributo não deve conter letras maiúsculas e deve ter pelo menos um caractere depois do prefixo “data-
  • O valor do atributo pode ser qualquer string

Código:

Know data attribute

I have a hidden secret!

Então, em JavaScript:

function reveal() {
   let dataDiv = document.getElementById('data-attr');
    let value = dataDiv.dataset['customAttr'];
   document.getElementById('msg').innerHTML = `${value}`;
}

Observação: para ler os valores desses atributos em JavaScript, você pode usar getAttribute () com seu nome HTML completo (ou seja, data-custom-attr), mas o padrão define uma maneira mais simples: usando uma propriedade dataset.

Veja funcionando:

Você pode mexer com o atributo aqui: https://html5-tips.netlify.app/data-attribute/index.html

Dicas rápidas:

Você pode usá-lo para armazenar alguns dados na página e depois passá-los usando a chamada REST para o servidor. Outro caso de uso poderia ser a maneira como eu mostro uma contagem de mensagens de notificação aqui.

6) Tag output

A tag <output> representa o resultado de um cálculo. Normalmente, este elemento define uma região que será usada para exibir a saída de texto de alguns cálculos.

Código:

* =

Veja funcionando:

Você pode mexer com a tag aqui: https://html5-tips.netlify.app/output/index.html

Dicas rápidas:

Se você estiver executando qualquer cálculo no JavaScript do lado do cliente e quiser que o resultado reflita na página, use a tag <output>. Você não precisa percorrer as etapas extras para obter um elemento usando getElementById ().

7) Datalist

A tag <datalist> especifica uma lista de opções predefinidas e permite ao usuário adicionar mais opções. Ele fornece um recurso de preenchimento automático que permite obter as opções desejadas com uma digitação antecipada.

Código:

Veja funcionando:

Você pode mexer com a tag aqui: https://html5-tips.netlify.app/datalist/index.html

Dicas rápidas:

Em que é diferente da tag tradicional <select> – <option>? A tag select é para selecionar um ou mais itens das opções em que você precisa percorrer a lista para escolher. Datalist é o recurso avançado com suporte para preenchimento automático.

8) Range(Slider)

range é um tipo de input que apresenta um seletor baseado em uma determinada faixa de valores.

Código:

Veja funcionando:

Você pode mexer com a tag aqui: https://html5-tips.netlify.app/range/index.html

Dicas rápidas:

Não existe nada chamado slider em HTML5!

https://twitter.com/tapasadhikary/status/1294148715133902848

9) Tag meter

Use a tag <meter> para medir os dados dentro de um determinado intervalo.

Código:


2 out of 10
60%

Veja funcionando:

Você pode mexer com a tag aqui: https://html5-tips.netlify.app/meter/index.html

Dicas rápidas:

Não use a tag <meter> para um tipo de indicador de progresso da experiência do usuário. Temos a tag <progress> do HTML5 para isso.


 32% 

10) Inputs

Esta parte é mais conhecida por nós com o uso de tipos de entrada como texto, senha, etc. Existem alguns usos especiais dos tipos de entrada:

Código:

required

Marque um campo de entrada como obrigatório.

autofocus

Fornece foco no elemento de entrada automaticamente, colocando o cursor sobre ele.

validação por regex

Você pode especificar um padrão usando regex para validar a entrada.

escolha de cor

Um seletor de cores simples.


Color Me!

E agora?

Bem, tenho certeza que deixei para trás alguns úteis. Que tal você completar a lista? Forneça comentários sobre esta postagem e seu aprendizado em HTML5. Te vejo em breve no meu próximo artigo.

Sim, todo o código usado neste artigo pode ser encontrado no repositório git mencionado abaixo. Por favor, dê ao repo uma estrela, se você gostou do trabalho.

https://github.com/atapas/html-tips-tricks

Se foi útil para você, por favor, curta/compartilhe para que alcance outras pessoas também. Sou apaixonado por UI / UX e adoro compartilhar meu conhecimento por meio de artigos. Por favor, visite meu blog para saber mais.

Você pode gostar também de:

Fique à vontade para me seguir no Twitter @tapasadhikary.”

Publicado originalmente como “10 useful HTML5 features, you may not be using” em 17 de setembro de 2020. Traduzido e republicado com autorização do autor.