Os atributos são fundamentais para os elementos HTML, pois fornecem informações suplementares ou instruções sobre um elemento. Ao definir o comportamento, a aparência ou a funcionalidade do elemento, os atributos aumentam sua funcionalidade geral. Os atributos são especificados dentro da tag de abertura de um elemento e consistem em um nome e um valor.

Sintaxe básica

Atributos são especificados apenas dentro dos parênteses angulares da tag de abertura de um elemento. A sintaxe para definir um atributo é a seguinte:

Pontos-chave

• Atributos podem ser opcionais ou obrigatórios: dependendo do elemento, certos atributos podem ser necessários para funcionar corretamente, enquanto outros são opcionais e fornecem opções adicionais de personalização;
• Atributos são envolvidos em aspas: os valores dos atributos são colocados dentro de aspas duplas ("...") ou simples ('...'). Isso ajuda a distingui-los do nome do elemento e auxilia na legibilidade;
• Cada tag tem seu próprio conjunto de atributos: diferentes elementos HTML suportam diferentes atributos. Compreender os atributos específicos aplicáveis a cada elemento é essencial para utilizá-los efetivamente;
• Múltiplos atributos podem ser usados: é possível incluir múltiplos atributos em um único elemento, separando-os com um espaço. Isso permite uma personalização mais extensa e controle sobre o comportamento do elemento.

Exemplo de uso

Vamos explorar alguns exemplos de elementos HTML com atributos para entender como eles impactam o comportamento desses elementos:

Explicação do código linha por linha:

1. Elemento input;
   • type="text" especifica que o campo de entrada deve aceitar a entrada de texto simples do usuário;
   • placeholder="name" fornece uma dica ou um exemplo da entrada esperada no campo de entrada. Esperamos um nome de usuário.
2. Elemento img;
   • alt="Forest" fornece um texto alternativo para uma imagem. Se a imagem não carregar, o usuário verá o texto "Forest";
   • src="..." especifica o URL da origem de uma imagem. Está localizado neste link (https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/forest+example+img.png) na internet.
3. Elemento a;
   • target="_blank" especifica que, quando um usuário clica no link, o URL de destino deve abrir em uma nova aba do navegador;
   • href="https://www.google.com/" link de destino.
4. Elemento button.
   • type="reset" fornece um comportamento de botão que, quando clicado, reinicia os campos do formulário para os seus valores iniciais se o botão estiver especificado dentro do elemento do form.

Nota

Prosseguiremos com a exploração detalhada dos atributos de cada elemento neste curso. Por enquanto, é fundamental compreender o conceito de atributo, a sua aplicação e o fato de que cada elemento tem o seu conjunto único de atributos. Esses atributos desempenham um papel significativo na alteração da aparência, do propósito e da funcionalidade do elemento.

Resumo

Um elemento HTML geralmente consiste em uma tag, atributos e conteúdo.

• Tag define o tipo de elemento (por exemplo, p, img, etc.);
• Atributo fornece informações adicionais sobre o elemento (por exemplo, src, alt, etc.);
• Conteúdo é qualquer coisa entre a tag de abertura e de fechamento do elemento.