HTML O que é? Tags Elementos e Atributos (Atributos) Entrada 35

O que são Atributos?

Atributos são informações que passamos na Tag para que ela se comporte da maneira esperada. Existem atributos globais (que funcionam em todas as Tags) e específicos (que são direcionados para cada Tag, através de especificação).

Os Atributos possuem nome e um valor, existem Atributos que você vai usar praticamente sempre e existem outros que serão mais raros.

Atributos globais

Seguem alguns atributos globais importantes e suas descrições simplificadas:

accesskey

Determina uma (ou mais) tecla(s) de atalho para o elemento. Para definir mais de uma tecla, coloque-as separadas por espaço.

class

Determina uma (ou mais) classe(s) para o elemento. Para definir mais de uma classe, coloque-as separadas por espaço.

draggable

Define se um elemento é arrastável ou não.

hidden

Oculta o elemento onde for declarado.

id

É o identificador único do elemento. Somente deve ser declarado um id por elemento. E este id não deve ser repetido na mesma página.

lang

Determina o idioma em que está escrito o conteúdo do elemento.

style

Determina propriedades CSS diretamente no elemento.

tabindex

Organiza os elementos por ordem de tabulação. Deve-se usar valor numérico.

title

Representa um auxílio ao elemento. Semelhante a dica do elemento.

Como você pôde ver, a sintaxe de Atributos é muito simples, porém, por mais simples que seja é sempre bom ter em mente boas práticas para que se tenha qualidade e fácil manutenção em seu HTML.

Existem Atributos em que os valores não precisam ser passados entre aspas, mas manter um padrão ajuda você e ajuda quem quer que seja que no futuro tenha que trabalhar com o seu HTML. Portanto, não é uma regra mas uma boa prática você envolver os valores dos Atributos entre aspas.

    <!-- Isso funciona, mas não é recomendável -->
    <a href="http://tableless.com.br" target=_blank>www.tableless.com.br</a>
 
    <!-- Isso funciona e é recomendável -->
    <a href="http://tableless.com.br" target="_blank">www.tableless.com.br</a>
  

Na prática

Agora que você entendeu separadamente o papel das Tags, Elementos e Atributos, vamos ver um exemplo prático:

    <!-- A Tag <img> define que o conteúdo do Elemento é uma imagem e os atributos que utilizamos são src e alt -->
    <img src="logo.png" alt="HTML 5 Logo" />
  

Analisando o exemplo:

No exemplo acima definimos o caminho onde está a imagem com o Atributo src e utilizamos o Atributo alt para descrever que imagem é essa (a utilização do atributo alt é altamente recomendado, pois, mesmo que a imagem não seja carregada por qualquer motivo, o usuário conseguirá identificar que ali era para ser carregado o logo do HTML5).