Atributos HTML

Na lição anterior aprendeu que os elementos são feitos de etiquetas e conteúdo. Os atributos dão a essas etiquetas informação extra. Sem atributos, muitos elementos não conseguem fazer o seu trabalho real — uma ligação precisa de um endereço e uma imagem de um caminho de ficheiro.

O que é um atributo HTML?

Um atributo HTML é um nome e um valor colocados na etiqueta de início de um elemento. Diz ao navegador algo sobre esse elemento que não é o mesmo texto visível entre as etiquetas.

Resposta direta

Os atributos usam um padrão simples: name="value". Pertencem à etiqueta de abertura, antes do > de fecho. Exemplos comuns incluem href em ligações e src mais alt em imagens. As lições seguintes usam atributos com frequência; aprenda o padrão uma vez aqui.

Ler o exemplo

• Na ligação, href guarda o URL de destino
• O texto visível da ligação continua a ser o conteúdo entre <a> e </a>
• Na imagem, src aponta para o ficheiro de imagem
• alt fornece texto alternativo quando a imagem não carrega ou para acessibilidade
• Ambos os atributos estão dentro da etiqueta de início

Regras de sintaxe a lembrar

1. Coloque atributos só na etiqueta de início — não na de fim
2. Separe o nome do valor com =
3. Envolva a maioria dos valores em aspas: href="https://example.com"
4. Pode colocar mais do que um atributo na mesma etiqueta de início, separados por espaços
5. Os nomes de atributos costumam escrever-se em minúsculas no HTML moderno

Aqui href define o endereço e title pode dar texto de ajuda extra (muitas vezes como tooltip em navegadores de secretária). Não precisa de cada atributo opcional em cada etiqueta — use os que o elemento precisa.

Atributos vs conteúdo

O conteúdo é o que fica entre a etiqueta de início e a de fim, como as palavras de um parágrafo. Os atributos vivem na etiqueta de início e configuram o elemento. Misturá-los causa erros: pôr um URL só no texto da ligação não cria uma ligação que funcione; o URL pertence a href.

Nota sobre elementos vazios

Elementos vazios como img ainda usam atributos mesmo sem etiqueta de fim separada. É normal: os atributos descrevem o elemento; não são o conteúdo envolvido.

Experimente você mesmo

1. Abra uma página HTML básica no editor
2. Adicione uma ligação com atributo href para um URL real ou de exemplo
3. Adicione um img com src e alt significativo (qualquer caminho de prática ou nome provisório para aprender a sintaxe)
4. Guarde e abra a página no navegador
5. Clique na ligação e verifique no código-fonte que a marcação da imagem está presente mesmo que o ficheiro falte

Erros comuns

• Escrever atributos na etiqueta de fecho
• Esquecer aspas em valores que as precisam
• Usar o atributo errado (por exemplo pôr um URL em src numa ligação em vez de href)
• Deixar alt vazio em imagens informativas
• Assumir que o texto do atributo aparece sempre como conteúdo visível — muitos configuram comportamento ou acessibilidade

Resumo

• Os atributos acrescentam informação extra dentro da etiqueta de início
• A forma habitual é name="value"
• As ligações precisam de href; as imagens costumam precisar de src e alt
• O conteúdo fica entre etiquetas; os atributos configuram a etiqueta
• Pode combinar vários atributos numa etiqueta de início
• As lições seguintes reutilizam este padrão em títulos, formulários, média e mais