O HTML utiliza dois tipos de tags: tags em pares e tags únicas (autofechamento). Cada uma desempenha um papel diferente na estruturação de uma página web.

Tags em Pares

Tags em pares possuem uma tag de abertura e uma de fechamento. Elas envolvem conteúdos, agrupam elementos e definem significado ou estrutura.

Sintaxe:

<tag_name>Some content</tag_name>

Veja um exemplo real de uso de tags em pares:

Neste exemplo:

• <section>...</section>: agrupa conteúdos relacionados;
• <h1>...</h1>: adiciona um título para a seção;
• <p>...</p>: contém um parágrafo explicando que a maioria das tags HTML aparece em pares.

Tags Simples

Tags simples não possuem uma tag de fechamento. São utilizadas quando não há necessidade de conteúdo interno e todo o comportamento é definido por meio de atributos.

Sintaxe:

<tag_name />

Aqui está um exemplo real de uso de tags simples:

Este código inclui dois elementos:

• <input />: cria um campo de entrada de texto. O atributo placeholder=" name" exibe uma dica dentro da caixa;
• <img />: exibe uma imagem de frutas.
  • alt="Fruits": texto exibido caso a imagem não seja carregada;
  • width e height: definem as dimensões da imagem;
  • src: especifica a URL da imagem.

Aninhamento de Tags

As tags devem ser aninhadas corretamente, como bonecas matrioscas, com cada tag de fechamento correspondendo à sua tag de abertura na ordem adequada.

Veja um exemplo de tags aninhadas:

<tag1>
  <tag2>
    <tag4>...</tag4>
    <tag5>...</tag5>
  </tag2>
  <tag3>
    <tag6>...</tag6>
  </tag3>
</tag1>

Considere o seguinte exemplo válido:

Este código exibe um parágrafo com um link e texto em destaque:

• <p>...</p>: envolve todo o parágrafo;
• <a href="https://privacy.com">...</a>: cria um link clicável para a Política de Privacidade;
• <strong>...</strong>: deixa a palavra "website" em negrito para destacá-la.