Anatomia de uma tag
Toda tag segue as mesmas regras de sintaxe. Entender essas regras evita boa parte dos erros dos primeiros dias.
Estudar esta lição interativa →Se cada etiqueta segue uma regra diferente, ninguém consegue organizar as caixas da mudança. É por isso que toda tag de HTML segue o mesmo formato: sem essa consistência, o navegador não teria como interpretar o código de forma confiável. Vale conhecer as peças que formam uma tag antes de seguir em frente.
Tag de abertura
<p>Marca onde o elemento começa. O nome vai sempre entre os sinais de menor e maior.
Tag de fechamento
</p>Marca onde termina, com uma barra antes do nome. Esquecê-la é o erro número um de quem está começando.
Atributo
href="..."Informação extra dentro da tag de abertura, no formato nome="valor". Use sempre aspas: são opcionais só em casos simples, mas obrigatórias quando o valor tem espaço. Alguns atributos são "ligou/desligou" e não têm valor (como required).
Elemento vazio
<img>, <br>Algumas tags não têm conteúdo dentro (por isso se chamam elementos vazios), então não precisam de fechamento separado.
Um elemento é o conjunto completo: tag de abertura, o que está dentro dela (o conteúdo) e a tag de fechamento. Alguns elementos ainda carregam atributos, que vão dentro da tag de abertura e dão informações extras sobre aquele elemento específico. Um link, por exemplo, precisa dizer para onde ele aponta, e é o atributo href que carrega esse endereço. Veja tudo isso junto, rodando:
As quatro partes de uma tag com atributo: <a marca onde ela começa (abertura), href="curso.html" dá uma informação extra (atributo), Saiba mais é o que fica visível (conteúdo) e </a> marca onde ela termina (fechamento).
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Repare no link (com dois atributos) e na imagem, que não tem tag de fechamento.
Repare em <img src="..." alt="...">: essa tag não tem </img>, porque uma imagem não "contém" nada dentro dela, ela mesma É o conteúdo. O mesmo vale para <br> (quebra de linha). São exceções pontuais; a grande maioria das tags (p, h1, a, ul, e por aí vai) exige abertura e fechamento.
Três deslizes respondem pela maioria dos problemas no começo: esquecer a tag de fechamento (o navegador tenta adivinhar onde ela deveria estar, e nem sempre acerta, bagunçando o resto da página); esquecer as aspas num valor com espaços, como em alt=Pôr do sol (o navegador lê só "Pôr" como valor e trata "do" e "sol" como atributos soltos), ou esquecer o https:// num link externo, como em href="exemplo.com" (vira um endereço dentro do seu próprio site); e trocar o menor/maior de lugar, como em >p<. Se uma página aparecer toda desorganizada de repente, o primeiro suspeito é sempre uma tag sem fechar em algum lugar acima.
Alguns atributos funcionam como um interruptor: basta a presença para valer. É o caso de required, checked, open e controls, que você vai encontrar nas próximas lições. A pegadinha é achar que required="false" desliga o atributo: não desliga, porque a presença já liga. Para desligar, remova o atributo.
Dois recursos que aparecem nos exemplos do curso sem aviso. Um comentário é uma nota para quem lê o código: <!-- isto não aparece na página -->. O navegador o ignora, mas ele continua visível para quem abrir o código-fonte, então nada de senha ou segredo ali. Uma entidade escreve um caractere especial por um código: © vira ©, < e > viram os sinais < e > (é como você mostra uma tag na tela sem que o navegador a execute) e & vira &.
HTML não é sensível a maiúsculas nas tags (<P> funcionaria), mas a convenção universal, seguida por praticamente todo código profissional, é escrever tags e atributos em minúsculas. Adote esse hábito desde já.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Edite o link e adicione uma imagem.