1 – Translate
O atributo global translate é muito útil para evitar traduções inconvenientes, como o nome da empresa, ou nome de produtos, por exemplo.
Nem todos os navegadores suportam esse atributo, porém ele é respeitado por ferramentas de tradução, como o Google Tradutor (Google Translate).
No exemplo abaixo, o atributo é usado para solicitar ás ferramentas de tradução que não traduzam o nome da empresa.
Por fim, você pode ver mais informações sobre ele na documentação MDN.
2 – Contenteditable
Com o atributo “contenteditable”, é possível alterar o texto de um elemento html, mesmo que não seja um input.
3 – Spellcheck
Com o atributo spellcheck, é possível avisar ao usuário sobre possíveis erros ortográficos. Esse recurso é interessante para avisar ao usuário quando ele escrever alguma palavra errada.
Porém, apesar de útil, tenha em mente que o usuário pode ignorar o aviso e enviar os dados com erros de qualquer forma.
Resultado do código acima:
Por fim, vale ressaltar que também é possível controlar o idioma com o atributo “lang”.
4 – Loading
Você pode usar o atributo loading="lazy" para adiar o carregamento da imagem até que o usuário role até ela.
Com o “lazy loading” (carregamento lento), se o conteúdo não estiver na área de exibição da tela, não será carregado. Ou seja, o tempo total de carregamento da página será menor.
5 – Multiple
Com o atributo “multiple”, é possível criar um input ou select que recebe mais de um valor.
Essa funcionalidade é útil permitir que o usuário envie mais de um arquivo ao mesmo tempo, ou que ele selecione várias opções de um select.
Resultado:
O usuário pode selecionar mais de uma opção do select, segurando CTRL e clicando nas opções desejadas.
6 – Download
O atributo “download” permite configurar um link para salvar o arquivo, ao invés de abri-lo no navegador.
Esse recurso é especificamente útil para arquivos pdf, no caso de download de catálogos, manuais e ebooks, mas pode ser utilizado para qualquer tipo de arquivo, como jpg, mp3, mp4, etc.
7 – Accesskey
Na minha opinião, um dos recursos mais legais do html! Você pode definir atalhos de teclado para disparar ações em determinados elementos da página.
Usando o exemplo a cima, podemos definir uma tecla de atalho “a”, com o atributo acesskey.
Dessa forma, dependendo do navegador do usuário, será possível apertar as teclas alt + a (sendo “a”, a tecla especificada em acesskey) para disparar o evento da tag html.
No exemplo acima, definimos que a “tecla de acesso” ao elemento é a tecla “a”. Dessa forma podemos usar o atalho “alt + a” para baixar o arquivo, sem ter que clicar no link.
Existem várias aplicações para ele, como facilitar a navegação entre páginas para o usuário, ou a ação de download de um arquivo, e muito mais!
Os atalhos atalhos são diferentes de acordo com o navegador e o sistema operacional, então antes de usar, sugiro que consulte a documentação do MDN sobre o acesskey.
8 – Title
Com o atributo title, você pode definir uma mensagem, dica ou explicação simples sobre algum conteúdo em específico.
Essa mensagem aparecerá ao passar o mouse em cima do texto que estiver dentro da tag com o atributo.
Com o atributo title, você pode definir uma mensagem, dica ou explicação simples sobre algum conteúdo em específico.
9 – Data-*
Atributos data servem como uma forma de dados personalizados, nos quais permitem que informações sejam trocadas entre o HTML e sua representação DOM, no Javascript.
Neste exemplo da MDN, uma nave espacial “sprite” de um jogo pode ser uma simples tag <img> com um atributo de classe e alguns atributos data:
10 – Hidden
Se você conhece CSS, já deve ter usado o style=”display: none;” para ocultar algum elemento html. Porém, caso você não saiba, existe uma forma mais rápida de fazer isso!
Para esconder um elemento, basta usar o atributo hidden! Veja como é fácil:
Resultado:
Conclusão
No html, existem muitas tags úteis e interessantes. Alguns deles são puramente visuais, mas outros podem ter uma grande utilidade e funcionalidade.
E aí, você já conhecia esses atributos? O que achou deles? Comenta ai em baixo 🙂
Por fim, se você já sabe HTML e quer aprender alguma linguagem de programação, recomendo que veja meu artigo 5 linguagens de programação para aprender em 2021!
