6 Atributos HTML Incríveis Que Você Precisa Conhecer

Neste artigo você conhecer alguns atributos HTML que pode te ajudar em diversas situações na área de desenvolvimento web.

Ter esse tipo de conhecimento pode fazer você se destacar no mercado de trabalho pois nem todo mundo conhece e as poucas pessoas que conhecem acabam não utilizando.

Portanto, se você quer se tornar um desenvolvedor web de sucesso, recomendo ler com atenção este artigo.

Bora lá conhecer esses atributos HTML?

Multiple

O atributo HTML multiple permite que o usuário consiga inserir vários valores em um único lugar. Ele pode ser utilizado nos seguintes elementos:

• <input>
• <select>

Exemplo:

Um campo de upload de arquivo que aceita vários valores:

<form action="/action_page.php">
  Select images: <input type="file" name="img" multiple>
  <input type="submit">
</form>

Uma lista suspensa que permite várias seleções:

<select multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Translate

Utilizando o atributo translate você acaba dizendo ao navegador que um determinado conteúdo será traduzido ou não.

Exemplo:

Especifique que alguns elementos não devem ser traduzidos:

<p translate="no">Isso não será traduzido!</p>

Veja também: 4 Sites Para Mostrar Seus Códigos Em Formato De Imagens

Download

O atributo download especifica que o destino (o arquivo especificado no atributo href) será baixado quando um usuário clicar no hiperlink.

O valor opcional do atributo download será o novo nome do arquivo após o download.

Não há restrições aos valores permitidos e o navegador detectará automaticamente a extensão de arquivo correta e a adicionará ao arquivo (.img, .pdf, .txt, .html, etc.).

Se o valor for omitido, o nome do arquivo original será usado.

Exemplo

No exemplo abaixo o nome do arquivo após o download será nomeArquivo

<a href="index.html" download="nomeArquivo">Baixe Aqui!</a>

Spellcheck

O atributo spellcheck especifica se o elemento deve ter sua ortografia e gramática verificadas ou não.

O seguinte pode ser verificado ortográfico:

• Valores de texto em elementos de entrada (não pode ser campo de senha)
• Texto em elementos <textarea>
• Texto em elementos editáveis

Exemplo

<p contenteditable="true" spellcheck="true">Meu portugueis é muitu boun </p>

Acesskey

O atributo accesskey especifica uma tecla de atalho para ativar / focar em um determinado elemento.

Exemplo

<a href="https://programadorviking.com.br" accesskey="p">PROGRAMADOR VIKING</a>

Poster

Por fim, o atributo poster especifica uma imagem a ser mostrada durante o download do vídeo ou até que o usuário pressione o botão de reprodução.

Se não estiver incluído, o primeiro quadro do vídeo será usado.

Exemplo

<video controls
src="https://link.com"
poster="posterImage.png">
</video>

Conclusão: Atributos HTML

Em conclusão, hoje aprendemos a utilizar 6 atributos HTML que são extremamente importantes em diversas situações, porém poucas pessoas utilizam.

Trabalhar da forma correta com HTML irá deixar seus projetos de desenvolvimento web muito mais sofisticados e profissionais. Consequentemente você poderá cobrar mais pelos seus projetos.

Invista em você e conquiste uma excelente carreira profissional na área da tecnologia.

Enfim, muito obrigado por ler até aqui e espero que esse conteúdo tenha te ajudado.

Um forte abraço!