Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Atributos | Tags e Atributos
HTML Supremo
course content

Conteúdo do Curso

HTML Supremo

HTML Supremo

1. Desenvolvimento Web
2. Tags e Atributos
3. Estrutura do Documento
4. Mídias e Tabelas
5. Formulários

bookAtributos

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:

html

index

css

index

js

index

copy

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.
Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 3
some-alt