No HTML, existem tanto tags em pares quanto tags únicas (também conhecidas como tags autossuficientes ou elementos vazios). Cada tipo possui um propósito específico e desempenha uma função distinta.

Tags em Pares

Tags em pares consistem em uma tag de abertura e uma de fechamento. Elas podem envolver o conteúdo e agrupar itens para alterar algumas propriedades ou reunir elementos por significado.

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 são usadas em pares.

Tags Simples

Tags simples consistem apenas em uma tag de abertura, sem tag de fechamento. São utilizadas quando a tag não requer conteúdo ou quando todo o conteúdo e comportamento são definidos 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

Ao aninhar tags, seguir a ordem hierárquica é essencial, semelhante a bonecas russas. Cada tag aninhada deve ser devidamente incluída dentro de sua tag pai, respeitando as regras da sintaxe HTML.

Veja um exemplo de tags aninhadas:

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

Considere o próximo 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.

Resumindo

HTML é composto por tags pareadas e simples, cada uma com finalidades diferentes. Tags pareadas possuem uma tag de abertura e uma de fechamento para envolver o conteúdo, enquanto tags simples são autocontidas. Aninhar corretamente as tags e seguir a hierarquia adequada são essenciais para uma estrutura HTML bem formada.