HTML: Elementos HTML
Entenda a diferença entre elementos block-level e inline, e domine a forma correta de aninhar tags.
1. O que são Elementos HTML
Em HTML, um elemento refere-se à estrutura completa desde a tag de abertura até a tag de fechamento, incluindo as próprias tags e o conteúdo envolvido. O navegador analisa cada elemento como um nó na árvore DOM, formando a estrutura hierárquica da página.
Um elemento HTML completo consiste em três partes:
▶ Exemplo
<p>Este é um elemento de parágrafo</p>
<!-- tag de abertura + conteúdo + tag de fechamento = elemento completo -->
<a href="https://example.com">Clique aqui</a>
<!-- o elemento pode conter atributos (href), escritos na tag de abertura -->
No entanto, nem todos os elementos possuem conteúdo. Alguns elementos não têm conteúdo e não precisam de tag de fechamento; são chamados de elementos vazios (void elements).
▶ Exemplo
<br> <!-- elemento de quebra de linha: sem conteúdo, sem tag de fechamento -->
<hr> <!-- linha horizontal: também é um elemento vazio -->
<img src="/assets/images/tutorials/html-example-photo.webp" alt="Uma foto de exemplo"> <!-- elemento de imagem: apenas atributos, sem conteúdo -->
<input type="text" name="usuario"> <!-- elemento de entrada -->
A diferença principal: elementos regulares possuem tag de abertura, conteúdo e tag de fechamento; elementos vazios possuem apenas a tag de abertura (geralmente com atributos), sem conteúdo e sem tag de fechamento.
<html> é o nó raiz, com <body> e <head> como seus nós filhos. As relações de aninhamento entre os elementos determinam as relações de pai-filho e irmãos entre os nós. Você pode revisitar o capítulo HTML Básico para rever o conceito de DOM.
2. Elementos Block-level vs Elementos Inline
Os elementos HTML são divididos em duas categorias com base em como se dispõem na página: elementos block-level e elementos inline. Entender suas diferenças é o primeiro passo para dominar o layout de páginas.
(1) Elementos Block-level
Elementos block-level se caracterizam por ocupar a largura total do seu elemento pai. Não importa quão estreito seja o conteúdo, eles sempre ocupam a largura total da linha, e os elementos antes e depois deles aparecerão em linhas separadas.
Os elementos block-level mais comuns estão na tabela abaixo:
| Tag | Descrição | Tag | Descrição | Tag | Descrição |
|---|---|---|---|---|---|
<h1>~<h6> |
Títulos 1-6 | <dl> |
Lista de descrição | <article> |
Artigo |
<p> |
Parágrafo | <dt> |
Termo de descrição | <aside> |
Barra lateral |
<fieldset> |
Grupo de campos | <dd> |
Detalhes da descrição | <footer> |
Rodapé |
<hr> |
Linha horizontal | <header> |
Cabeçalho | <table> |
Tabela |
<ol> |
Lista ordenada | <nav> |
Navegação | <div> |
Contêiner de bloco |
<ul> |
Lista não ordenada | <main> |
Conteúdo principal | <form> |
Formulário |
<li> |
Item de lista | <section> |
Seção |
▶ Exemplo
<p>Este é o primeiro parágrafo, ocupando uma linha inteira</p>
<p>Este é o segundo parágrafo, começando em uma nova linha</p>
<div>
<h2>Títulos também ficam em sua própria linha</h2>
<p>Parágrafos dentro de uma div também ficam em linhas separadas</p>
</div>
(2) Elementos Inline
Elementos inline se caracterizam por não ocupar uma linha inteira. Eles ocupam apenas a largura do seu conteúdo e são dispostos da esquerda para a direita dentro de uma linha, quebrando automaticamente para a próxima linha quando a largura é insuficiente.
Os elementos inline mais comuns estão na tabela abaixo:
| Tag | Descrição | Tag | Descrição |
|---|---|---|---|
<a> |
Hiperlink | <ins> |
Texto inserido |
<b> |
Negrito | <del> |
Texto excluído |
<strong> |
Texto importante | <button> |
Botão |
<em> |
Ênfase (itálico) | <input> |
Entrada de formulário |
<i> |
Itálico | <img> |
Imagem |
<small> |
Texto pequeno | <span> |
Contêiner inline |
<sub> |
Subscrito | <sup> |
Sobrescrito |
▶ Exemplo
<p>Este texto contém <strong>partes em negrito</strong> e <em>partes em itálico</em>, que são exibidas <span style="color: red">na mesma linha</span>.</p>
(3) Diferença Central entre os Dois
▶ Exemplo
<!-- Comparação block-level -->
<div style="border: 1px solid #e74c3c; padding: 4px;">Bloco 1</div>
<div style="border: 1px solid #e74c3c; padding: 4px;">Bloco 2</div>
<!-- Cada div ocupa sua própria linha, empilhados verticalmente -->
<!-- Comparação inline -->
<span style="border: 1px solid #3498db; padding: 4px;">Inline 1</span>
<span style="border: 1px solid #3498db; padding: 4px;">Inline 2</span>
<!-- Os dois spans ficam na mesma linha, dispostos horizontalmente -->
- Elementos block-level podem conter elementos inline e outros elementos block-level.
- Elementos inline só podem conter elementos inline (ou texto); eles não podem conter diretamente elementos block-level.
- Exceção: No HTML5, a tag
<a>pode envolver elementos block-level, como transformar um card inteiro em um link clicável.
3. Aninhamento e Hierarquia de Elementos
Os elementos HTML podem envolver uns aos outros como matrioskas russas. Essa relação é chamada de aninhamento. A estrutura de aninhamento determina as relações hierárquicas dos elementos na árvore DOM.
(1) Relações de Nós na Árvore DOM
Quando os elementos são aninhados uns nos outros, três tipos de relações se formam entre eles:
- Relação pai-filho: O elemento externo é o "nó pai" do elemento interno. Por exemplo,
<body>é o nó pai de<p>. - Relação irmãos: Múltiplos elementos filhos sob o mesmo pai são "nós irmãos" entre si. Por exemplo,
<h1>e<p>são irmãos quando ambos são filhos de<body>. - Relação ancestral-descendente: Uma relação que abrange múltiplos níveis de aninhamento. Por exemplo,
<html>é o nó ancestral de todos os elementos.
A estrutura de aninhamento a seguir mostra claramente as relações hierárquicas entre os elementos:
▶ Exemplo
<body> <!-- nó pai -->
<h1>Título da Página</h1> <!-- nó filho + irmão #1 -->
<p> <!-- nó filho + irmão #2 -->
Este parágrafo contém <strong>texto enfatizado</strong> <!-- nó neto (filho de p) -->
dentro dele.
</p>
</body>
A estrutura da árvore DOM correspondente é a seguinte:
body
├── h1 ("Título da Página")
└── p
├── text: "Este parágrafo contém "
├── strong
│ └── text: "texto enfatizado"
└── text: " dentro dele."
(2) Aninhamento Correto vs Incorreto
O aninhamento deve seguir o princípio "último a entrar, primeiro a sair" (LIFO) — o elemento mais interno aberto primeiro deve ser o último a ser fechado. Se as tags forem fechadas de forma cruzada, resulta em aninhamento incorreto:
▶ Exemplo
<!-- Aninhamento correto: abre primeiro, fecha por último -->
<div>
<p><strong>Texto importante</strong> seguido de texto normal.</p>
</div>
<!-- Aninhamento incorreto: tags cruzadas -->
<div>
<p><strong>Texto importante</p></strong>
</div>
<!-- O navegador tentará corrigir esse erro, mas pode causar problemas inesperados de layout -->
- Elementos inline (ex.:
<span>,<strong>) não podem aninhar elementos block-level (ex.:<div>,<p>). - A tag
<p>não pode aninhar outros elementos block-level dentro dela, como<div>ou outro<p>. - Aninhamento profundo, embora sintaticamente válido, reduz a legibilidade e a capacidade de manutenção. Recomenda-se manter o aninhamento em 3~4 níveis.
- Use o recurso "Inspecionar" do navegador (F12) para explorar visualmente a estrutura da árvore DOM — um excelente método de aprendizado.
❓ Perguntas Frequentes
div, section, article); elementos inline (strong, em, a) são apenas para estilização de texto.<a>, que pode envolver elementos block-level para tornar um card inteiro clicável.<strong> e <b> são ambos negrito, <em> e <i> são ambos itálico — qual é a diferença?<strong> significa "este texto é importante" e <em> significa "este texto precisa de ênfase" — eles transmitem significado. <b> apenas "deixa o texto em negrito" e <i> apenas "deixa o texto em itálico" — eles só afetam a aparência. Motores de busca e leitores de tela reconhecem a semântica de <strong> e <em>, mas ignoram <b> e <i>. Regra geral: use <strong>/<em> para ênfase de significado; use <b>/<i> ou CSS para estilização puramente visual.📖 Resumo
- Elemento = tag de abertura + conteúdo + tag de fechamento (elemento regular), ou apenas a tag de abertura (elemento vazio).
- Elementos block-level ocupam linhas inteiras e podem conter outros elementos block-level e inline; elementos inline ficam na mesma linha e só podem conter texto ou elementos inline.
- O aninhamento deve seguir o princípio "último a entrar, primeiro a sair"; não faça aninhamento cruzado.
- Na árvore DOM, os elementos formam três tipos de relações: pai-filho, irmãos e ancestral-descendente.
📝 Exercícios
- Experimento Block vs Inline: Crie uma página usando dois
<div>(block-level) e dois<span>(inline) com o mesmo conteúdo. Adicione um estilo de bordastyle="border:1px solid red"e observe como eles se dispõem de forma diferente no navegador. - Exercício de Árvore DOM: Escreva a estrutura da árvore DOM para o código a seguir (desenhe o diagrama de árvore manualmente):
<div><h2>Título</h2><p>Texto<strong>Ênfase</strong>Fim</p></div>
