Elementos HTML

Você já conhece o esqueleto básico do documento. Esta lição foca nos blocos de construção dentro da página: elementos HTML. Cada título, parágrafo e a maior parte das outras peças de uma página são elementos.

O que é um elemento HTML?

Um elemento HTML é uma unidade completa de marcação. Para a maioria dos elementos que envolvem conteúdo há três partes:

1. Uma etiqueta de início — por exemplo <p>
2. O conteúdo — o texto ou elementos aninhados dentro
3. Uma etiqueta de fim — por exemplo </p>
   Juntos, <p>Olá</p> é um elemento de parágrafo.

Resposta direta

Um elemento HTML costuma significar uma etiqueta de início, conteúdo opcional e uma etiqueta de fim que combinam. O navegador usa esse par para saber onde o elemento começa e termina. Alguns elementos vazios não envolvem conteúdo e por isso não usam uma etiqueta de fim separada.

Ler o exemplo

• <p> abre um elemento de parágrafo
• O texto entre as etiquetas é o conteúdo
• </p> fecha o parágrafo
• O título funciona da mesma forma com <h1> e </h1>

Elementos aninhados

Elementos podem ficar dentro de outros. Isso chama-se aninhamento. O elemento interno deve ser totalmente aberto e fechado antes de o exterior fechar.

Aqui o elemento strong está aninhado dentro do elemento p. O aninhamento marca significado dentro de pedaços maiores de conteúdo. Mantenha a árvore limpa: não sobreponha etiquetas abrindo p, abrindo strong e depois fechando p antes de strong.

Elementos vazios (void)

Alguns elementos não envolvem conteúdo. Muitas vezes chamam-se vazios ou void. Um exemplo comum para iniciantes é a quebra de linha:

A etiqueta <br> cria uma quebra de linha. Não tem etiqueta de fecho separada nem texto interior. Mais tarde encontrará outros elementos vazios como imagens. Por agora lembre-se: nem todo elemento parece um sanduíche início-conteúdo-fim.

Etiquetas vs elementos

As pessoas às vezes dizem «etiqueta» e «elemento» como se fossem iguais. Uma etiqueta é a marcação entre parênteses angulares. Um elemento é a unidade completa que o navegador entende — muitas vezes etiqueta de início + conteúdo + etiqueta de fim. Dizer «o elemento p» costuma significar a unidade completa de parágrafo.

Experimente você mesmo

1. Abra o seu arquivo HTML básico
2. Adicione um parágrafo com texto strong aninhado
3. Adicione um segundo parágrafo que use <br> entre duas linhas curtas
4. Guarde e atualize o navegador
5. Confirme que o texto a negrito e a quebra de linha aparecem como esperado

Erros comuns

• Esquecer a etiqueta de fecho em elementos que a precisam
• Sobrepor etiquetas em vez de aninhar de forma limpa
• Tratar cada etiqueta como se tivesse de ter conteúdo e etiqueta de fim (os vazios diferem)
• Nome de fecho errado, como emparelhar </p> com <h1>
• Colocar conteúdo visível da página fora de body

Resumo

• A maioria dos elementos HTML usa etiqueta de início, conteúdo e etiqueta de fim
• Elementos aninhados devem fechar na ordem correta
• Elementos vazios como br não envolvem conteúdo
• Uma etiqueta é o marcador entre parênteses; um elemento é a unidade completa
• Pratique aninhamento e uma quebra de linha simples na página
• Os atributos, que acrescentam informação extra às etiquetas, vêm na próxima lição