10 Recursos do HTML5 que você precisa conhecer

O HMTL5 não é em si uma novidade, mas ele trouxe tantas novidades que nem todas são conhecidas, por conta disso hoje vou apresentar 10 Recursos do HTML5 que você precisa conhecer.

Nesse post vou listar 10 recursos que eu mesmo não conhecia mas desde que conheci comecei a usar e que mudaram meu dia a dia.

Para facilitar vou separar os recursos em duas categorias, tags html5 e outros recursos.

10 Recursos do HTML5 que você precisa conhecer – Tags HTML5

Details

A tag <details> permite que sejam exibidos detalhes para o usuário sob demanda.

Se você precisa exibir algum elemento para o usuário sob demanda mas não quer usar o JavaScript você consegue fazer isso usando essa tag.

Por definição os detalhes vem fechados, mas quando aberto ele expande e exibe os detalhes.

Ainda é possível adicionar uma chamada para ação usando a tag <sumary> por exemplo.

Map

A tag <map> define a imagem de um mapa.

A imagem de um mapa consiste em uma imagem com uma ou mais áreas clicáveis.

Para determinar as áreas clicáveis usa-se a tag <area>.

Existem diversas formas de áreas como retângulo, circulo ou polígono.

Para determinar a forma área é preciso o atributo shape, mas se ele não for preenchido ele usa por padrão a forma de retângulo.

Mark

A tag <mark> cria um destaque no trecho entre as tags, mas somente no texto, no caso de uma imagem por exemplo a tag não terá efeito.

Ainda assim é possível mudar a cor de destaque usando CSS.

Output

A tag <output> representa o resultado de um cálculo.

A tag deve ser usada a fim de melhorar a semântica do HTML da página.

Datalist

A tag <datalist> cria uma lista com opções pré definidas e permite que o usuário adicione mais opções.

Porém da mesma forma do Content Editable o valor inserido não tem salvamento automático, sendo preciso criar um método JavaScript para isso.

Meter

Use a tag <meter> para mensurar data em relação a um intervalo.

Funciona da mesma forma do range, porém serve somente para exibição, não como entrada de dados.

10 Recursos do HTML5 que você precisa conhecer – Outros Recursos

Content Editable

O atributo contentEditable permite que um elemento tenha seu conteúdo interno editável.

Porém para que o atributo funcione é necessário adiciona-lo em uma tag que aceite o mesmo, são elas:

• <div>
• <p>
• <ul>
• <span>

Além disso é necessário adicionar o valor true no atributo.

Mas vale lembrar que o conteúdo inserido pelo usuário só será salvo se tiver alguma lógica usando JavaScript para isso.

data-*

O atributo data-* é usado para guardar dados privados da aplicação.

Os dados armazenados são privados da aplicação mas é possível acessá-los.

Então para acessar o valor armazenado você utiliza o atributo dataset.

Range

O tipo Range permite criar um slider para seleção de valores dentro de um intervalo.

Inputs

Há vários atributos e tipos de inputs, então não vou listar todos.

Segue abaixo alguns que considero muito úteis.

Required

Marca um campo como obrigatório.

A validação é de responsabilidade do browser que o faz de forma nativa.

Mas vale lembrar que a validação não bloqueia o envio de formulários, só sinaliza que não está conform

Validação com Regex

Você pode declarar um padrão Regex para fazer a validação direto no input.

A validação é de responsabilidade do browser que o faz de forma nativa.

Mas vale lembrar que a validação não bloqueia o envio de formulários, só sinaliza que não está conforme.

Seletor de cores

Abre um seletor de cores usando só o tipo color.

O evento disparado pela seleção da cor envia o código RGB da cor selecionada.

O seletor de cores é o nativo do navegador do cliente, então não tem como muda-lo, mas em geral os nativos são bem intuitivos.

10 Recursos do HTML5 que você precisa conhecer – Conclusão

Mostrei alguns recursos que são muitos úteis, mas eu tenho certeza que deixei passar alguns.

Então coloque aí nos comentários os recursos que você considera mais útil no HTML5.

Se você quiser conferir o código usado no post então confira o meu perfil no GitHub.

Quer aprender tudo sobre HTML? Confira o curso Pacote Full Stack.

Agora se você quer mais dicas sobre desenvolvimento clique aqui.