O que são tags, atributos e elementos

Se o HTML fosse uma língua falada, as tags seriam as palavras, os atributos seriam os adjetivos e os elementos seriam as frases completas. Juntos, esses três conceitos formam o vocabulário fundamental de tudo que você vai escrever em HTML.

Entender a diferença entre eles — e como cada um funciona — é o passo mais importante para começar a escrever código com confiança.

Tags: as marcações do HTML

Uma tag é uma marcação escrita entre sinais de menor e maior (< e >). Ela é a instrução que você dá ao navegador dizendo: "esse conteúdo aqui é um título", "esse aqui é um parágrafo", "esse aqui é uma imagem".

A grande maioria das tags vem em pares: uma tag de abertura e uma tag de fechamento.

<p>Este é um parágrafo.</p>

• <p> → tag de abertura — indica onde o elemento começa
• </p> → tag de fechamento — indica onde o elemento termina
• A barra / antes do nome é o que diferencia a tag de fechamento

Pense nas tags como parênteses de um texto: eles marcam onde uma ideia começa e onde ela termina.

Tags sem fechamento

Algumas tags não precisam de fechamento porque não envolvem conteúdo — elas são elementos que existem por si só. São chamadas de tags void (vazias) ou tags auto-fechadas.

<br>   <!-- quebra de linha -->
<hr>   <!-- linha horizontal -->
<img src="foto.jpg" alt="Uma foto">  <!-- imagem -->
<input type="text">  <!-- campo de texto -->
<meta charset="UTF-8">  <!-- metadado -->

Essas tags não têm conteúdo entre abertura e fechamento — elas simplesmente existem e fazem seu trabalho.

💡 No HTML5, você não precisa fechar essas tags com />. Escrever apenas <br> é suficiente. Em versões antigas do XHTML, o fechamento <br /> era obrigatório — você pode encontrar esse estilo em código mais antigo.

Elementos: a tag + o conteúdo

Um elemento é o conjunto completo: a tag de abertura, o conteúdo e a tag de fechamento. É a unidade completa de significado no HTML.

<h1>Bem-vindo ao meu site!</h1>
 ↑           ↑              ↑
tag de    conteúdo       tag de
abertura                fechamento
|_______________________________|
              ↑
           elemento

Outra forma de pensar: se a tag é a embalagem, o elemento é a embalagem com o produto dentro.

<!-- Isso é apenas uma tag de abertura -->
<p>

<!-- Isso é um elemento completo -->
<p>Este texto é o conteúdo do elemento parágrafo.</p>

Elementos aninhados

Elementos podem conter outros elementos dentro deles. Isso se chama aninhamento — e é algo que você vai fazer o tempo todo em HTML.

<p>
  Este parágrafo tem uma palavra em
  <strong>negrito</strong>
  bem no meio.
</p>

Aqui, o elemento <strong> está dentro do elemento <p>. O <p> é o elemento pai e o <strong> é o elemento filho.

Regra importante: sempre feche os elementos na ordem inversa à que foram abertos. Pense em pilhas de caixas — você tira de cima para baixo:

<!-- ✅ Correto — fechado na ordem inversa -->
<p>Texto com <strong>negrito</strong> aqui.</p>

<!-- ❌ Errado — fechamento fora de ordem -->
<p>Texto com <strong>negrito</p></strong>

Atributos: informações extras para a tag

Os atributos são informações adicionais que você coloca dentro da tag de abertura para personalizar ou configurar o comportamento de um elemento.

A estrutura de um atributo é sempre:

nome="valor"

E ele fica sempre dentro da tag de abertura, depois do nome da tag:

<a href="https://www.google.com">Ir para o Google</a>
    ↑
 atributo

Nesse exemplo:

• href é o nome do atributo
• "https://www.google.com" é o valor do atributo
• Juntos, eles dizem ao navegador: "esse link aponta para o Google"

Vários atributos na mesma tag

Uma tag pode ter múltiplos atributos — basta separá-los com espaços dentro da tag de abertura:

<img src="perfil.jpg" alt="Foto de perfil" width="200" height="200">

Aqui temos quatro atributos:

• src → indica o caminho da imagem
• alt → texto alternativo para acessibilidade
• width → largura da imagem em pixels
• height → altura da imagem em pixels

Atributos booleanos

Alguns atributos não precisam de valor — a simples presença deles já ativa uma funcionalidade. São os atributos booleanos:

<!-- O campo aparece desabilitado -->
<input type="text" disabled>

<!-- O checkbox já vem marcado por padrão -->
<input type="checkbox" checked>

<!-- O vídeo toca automaticamente -->
<video src="video.mp4" autoplay>

Se o atributo está presente, ele é verdadeiro. Se está ausente, é falso. Simples assim.

Atributos globais: disponíveis em qualquer tag

Alguns atributos podem ser usados em qualquer elemento HTML — por isso são chamados de atributos globais. Os mais importantes são:

id — identificador único

<h2 id="sobre-mim">Sobre mim</h2>

O id dá um nome único a um elemento. Nenhum outro elemento na mesma página pode ter o mesmo id. É como o CPF de um elemento — cada um tem o seu.

É muito usado para:

• Criar links de navegação interna (âncoras)
• Identificar elementos para o JavaScript
• Aplicar estilos específicos no CSS

class — agrupamento de elementos

<p class="destaque">Este parágrafo é importante.</p>
<p class="destaque">Este também é importante.</p>
<p>Este é um parágrafo normal.</p>

A class agrupa elementos que compartilham características. Vários elementos podem ter a mesma classe. É como uma etiqueta de categoria — você coloca a mesma etiqueta em todos os produtos do mesmo tipo.

style — estilo inline

<p style="color: red; font-size: 18px;">Texto vermelho e grande.</p>

Permite aplicar CSS diretamente no elemento. Útil para testes rápidos, mas não recomendado para projetos reais — o ideal é manter o CSS em um arquivo separado.

title — texto de dica

<p title="Isso é uma dica!">Passe o mouse sobre mim.</p>

Exibe uma tooltip (balão de texto) quando o usuário passa o mouse sobre o elemento.

hidden — ocultar elemento

<p hidden>Este parágrafo está escondido.</p>

Oculta o elemento da página completamente, como se ele não existisse.

Tudo junto: anatomia completa de um elemento HTML

Vamos observar um elemento completo e identificar cada parte:

      atributo        atributo
    _____|_____    _____|_____
   |           |  |           |
<a href="contato.html" class="link-menu">Fale conosco</a>
↑                                        ↑            ↑
tag de                                conteúdo      tag de
abertura                                           fechamento
|__________________________________________________|
                         ↑
                      elemento

• Tag de abertura: <a href="contato.html" class="link-menu">
• Atributo 1: href="contato.html" — define o destino do link
• Atributo 2: class="link-menu" — classifica o elemento
• Conteúdo: Fale conosco — o texto visível do link
• Tag de fechamento: </a>
• Elemento completo: tudo junto, do <a> até o </a>

Resumindo