Elementos, atributos e aninhamento em HTML

Em HTML, o elemento p representa um parágrafo. Observe as três partes deste exemplo:

• Tag de abertura: <p> inicia a marcação, com o nome p entre < e >.
• Conteúdo: Olá, mundo! é o texto entre as duas tags.
• Tag de fechamento: </p> indica o fim, com uma barra / antes do mesmo nome p.

Uma tag é uma parte da marcação. No exemplo abaixo, o elemento completo reúne a abertura, o conteúdo e o fechamento.

Atributos acrescentam informações a um elemento. Eles ficam na tag de abertura, depois do nome do elemento e antes de >.

Neste exemplo, o atributo title fornece uma informação complementar sobre o parágrafo:

• Um espaço separa p do atributo.
• title é o nome do atributo.
• = liga o nome ao valor.
• "Aviso importante" é o valor delimitado por aspas.

Nos exercícios, usaremos aspas duplas. Quando o valor tiver espaços, todas as palavras ficam dentro do mesmo par de aspas.

Mensagem de boas-vindas é o valor de title: está entre aspas, dentro da tag de abertura.

Olá! é o conteúdo do parágrafo: está entre a abertura e o fechamento. Esse é o texto do parágrafo exibido na página.

O atributo não substitui o conteúdo e não é repetido no fechamento, que continua sendo </p>.

O conteúdo de um elemento pode incluir texto e outros elementos. Colocar um elemento dentro do conteúdo de outro é fazer um aninhamento.

O HTML tem regras sobre quais combinações são permitidas. Aqui, usaremos span para delimitar um trecho dentro de p.

Indentação é o recuo no início das linhas do código. Ela ajuda a enxergar o aninhamento:

Entre os elementos com abertura e fechamento que ainda estão abertos, feche primeiro o mais interno: aquele que foi aberto por último. Assim, o filho termina antes do pai.

Aberturas: p → span.

Fechamentos: span → p.

Cada tag de fechamento usa o mesmo nome da abertura correspondente: <span> combina com </span>.

Ter uma abertura e um fechamento para cada elemento não basta: a ordem também importa.

Se a tag de fechamento do pai aparece enquanto o filho ainda está aberto, os fechamentos ficam cruzados. Para corrigir, verifique quais elementos continuam abertos e feche primeiro o mais interno.

Nem todo elemento tem um par de tags. Elementos vazios, como meta, não admitem conteúdo interno — nem texto nem elementos filhos — e não possuem tag de fechamento.

Observe a forma de meta neste trecho isolado:

Apagar o texto de um parágrafo não transforma p em um elemento vazio. Ele continua podendo receber conteúdo. Neste exemplo, está apenas sem conteúdo e mantém abertura e fechamento:

O sinal < pode iniciar uma tag. Mas, se você quiser mostrar <p> como texto, precisa preservar esse sinal.

Para isso, use referências de caracteres: sequências que começam com &, terminam com ; e representam um caractere.

• < representa < sem iniciar uma tag.
• & representa um & literal, sem confundi-lo com o início de uma referência.

Se um atributo é delimitado por aspas duplas, uma aspa dupla escrita diretamente dentro dele encerraria o valor antes da hora.

Use " para cada aspa que deve fazer parte do valor. Mantenha as aspas externas como delimitadores.

Agora você vai revisar dois trechos independentes aqui na tela, sem montar um documento completo. Antes, observe como as partes se relacionam:

O elemento p é todo o trecho; <p title="Aviso"> é apenas sua tag de abertura. Aviso é o valor do atributo, não o conteúdo. Entre a abertura e </p>, há texto e um elemento span, filho de p.

O trecho abaixo precisa de revisão. Ele deve atender a estes requisitos:

• O texto do parágrafo deve ser Confira 2 < 5 & continue.
• Apenas 2 < 5 & continue deve ficar dentro de span.
• O atributo title do parágrafo deve ter o valor Dica "rápida", incluindo as aspas ao redor de rápida.

Este segundo trecho é independente do parágrafo: não coloque meta dentro de p. O atributo já está fornecido; mantenha-o como está e revise apenas o fechamento.