HTML: Elementos HTML

Última atualização: 2026-09-08

Entenda a diferença entre elementos block-level e inline, e domine a forma correta de aninhar tags.

Tags nesta seção: <html> <body> <head> <dl> <article> <p> <dt> <aside> <fieldset> <dd> <footer> <hr> <header> <table> <ol> <nav> <div> <ul> <main> <form> <li> <section> <a> <ins> <b> <del> <strong> <button> <em> <input> <i> <img> <small> <span> <sub> <sup> <h1>

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

▶ Experimente

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

▶ Experimente

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.

📌 Elementos e Nós do DOM: Na estrutura do DOM, cada elemento corresponde a um nó. <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

▶ Experimente

(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

▶ Experimente

(3) Diferença Central entre os Dois

▶ Exemplo

▶ Experimente

📌 Regras Importantes:

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

▶ Experimente

A estrutura da árvore DOM correspondente é a seguinte:

PLAIN

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

▶ Experimente

⚠️ Precauções de Aninhamento:

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

P Qual é a diferença entre elementos block-level e inline? Quando uso cada um?

R A diferença principal é se "quebram linha". Elementos block-level ocupam uma linha inteira — como um parágrafo — e são usados para construir a estrutura da página (títulos, seções, containers). Elementos inline não quebram o fluxo — como uma palavra — e são usados para estilizar texto dentro do conteúdo (negrito, links, ênfase). Na prática, 90% do layout usa elementos block-level (div, section, article); elementos inline (strong, em, a) são apenas para estilização de texto.

P Por que elementos inline não podem conter elementos block-level?

R Isso é um requisito de semântica HTML. Elementos block-level representam "uma seção independente de conteúdo", enquanto elementos inline representam "parte do fluxo de texto". Colocar um bloco dentro de um inline é como enfiar um parágrafo dentro de uma palavra — não faz sentido semântico. Navegadores podem tolerar isso, mas cria uma estrutura DOM confusa e afeta estilos CSS e operações JavaScript. A única exceção no HTML5 é a tag <a>, que pode envolver elementos block-level para tornar um card inteiro clicável.

P <strong> e <b> são ambos negrito, <em> e <i> são ambos itálico — qual é a diferença?

R A diferença é semântica. <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 borda style="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>

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós