English العربية Português 日本語

Emmet: Aninhamento

HTML é uma árvore: cada tag é um filho de outra tag (aninhada dentro dela) ou um irmão (no mesmo nível, adjacente). > e + são a taquigrafia para esses dois relacionamentos.

1. O Que Você Vai Aprender

2. A História Real de Uma Desenvolvedora Front-End

(1) Ponto de Dor: Codificar HTML Aninhado Manualmente é Lento e Confuso

Alice trabalha em uma empresa de e-commerce e está construindo uma página de destino de produto. A página tem apenas 4 seções: uma barra de navegação superior, uma seção hero, 3 cartões de recursos e um rodapé. Ela abre o editor para começar a codificar e imediatamente enfrenta 5 níveis de aninhamento:

HTML 
<body>
  <header>
    <nav>
      <ul>
        <li><a href=""></a></li>
      </ul>
    </nav>
  </header>
  ...
</body>

A cada nível ela precisa pensar: "Dentro de qual tag estou agora?" A cada </li> ela precisa verificar a ordem de fechamento. Ela calcula: escrever a estrutura de aninhamento para esta página de 60 linhas levará 15 minutos — e 8 desses minutos são gastos "encontrando a posição correta de fechamento". Codificar aninhamento manualmente não é apenas lento, é propenso a erros — um deslize e um </div> fecha no lugar errado.

(2) Como > e + Resolvem Isso

O Emmet usa dois operadores para expressar relacionamentos "pai-filho" e "irmão", escritos exatamente como seletores CSS. Alice escreve toda a navegação em uma linha de abreviação:

TEXT 📖 Somente leitura 
body>header>nav>ul>li*5>a

> significa "aninhar um nível mais fundo", *5 significa "repetir 5 vezes", e cada li contém automaticamente um a. De 5 níveis de aninhamento para uma linha de abreviação — de 15 minutos para 8 segundos. Após esta aula, você expressará estruturas de árvore HTML de qualquer profundidade e qualquer ramificação em uma única linha usando > e +.

(3) Benefícios

> e + são a base do Emmet — a subida ^, multiplicação * e agrupamento () que você aprenderá depois são todos construídos sobre eles. Após dominar estes dois operadores, Alice escreve estruturas aninhadas 10 vezes mais rápido, com expansão automática eliminando o "caos da ordem de fechamento". As próximas 4 aulas adicionam ^, *, (), ., # e $ em sequência — concluir esta aula é pré-requisito para as próximas 4.

3. O Operador de Aninhamento >: Pai Contém Diretamente o Filho

> significa descer — o próximo elemento na abreviação é o filho direto do elemento anterior. É o símbolo central do Emmet para expressar "aninhamento pai-filho" e é idêntico ao seletor filho do CSS.

Fragmento de Abreviação Significado Posição Visual
div>span span é filho direto de div span está indentado um nível mais fundo que div
div>section>p p é filho de section, section é filho de div 2 níveis de indentação
nav>ul>li 3 níveis de aninhamento 3 níveis de indentação

Dica: > não muda a posição do elemento anterior — apenas determina para qual nível os elementos subsequentes descem. Uma vez que você escreve >, todos os elementos seguintes (até que um ^ apareça ou a subárvore termine) permanecem nesse nível.

(1) Ilustração de Aninhamento de Nível Único

Nota: O diagrama de árvore foi removido conforme o §7 deste tutorial (orçamento Mermaid) — apenas a Aula 6 tem permissão para usar 1 diagrama Mermaid. Consulte a tabela de aninhamento > acima junto com a tabela de irmão + abaixo: > forma relacionamentos pai-filho (um nível de indentação), enquanto + forma irmãos pares (mesma indentação).

Ambos os elementos filhos entram em div via >, então p e span são pares (irmãos) — mas são filhos de div.

4. O Operador Irmão +: Elementos Adjacentes no Mesmo Nível

+ significa irmão — o próximo elemento na abreviação está no mesmo nível do elemento anterior e posicionado imediatamente após ele. Corresponde ao seletor de irmão adjacente do CSS.

Fragmento de Abreviação Significado Posição Visual
h1+p p é irmão de h1, adjacente Ambos têm a mesma indentação
div+div Dois elementos div como pares Forma uma cadeia de irmãos
nav+main+aside 3 irmãos no mesmo nível Layout clássico de três colunas

Ponto-Chave: Quando + e > aparecem juntos, > é o sinal de "descer" enquanto + é meramente "acrescentar no mesmo nível". Por exemplo, a>b+c significa: primeiro desça para a para criar b, depois permaneça dentro de a e acrescente c. A estrutura final é <a><b></b><c></c></a>.

5. Exemplos Práticos

Os 5 exemplos a seguir cobrem todos os cenários principais para > e + — do mais simples "pai-filho" a árvores mistas multinível complexas.

▶ Exemplo: Aninhamento de Nível Único nav>ul>li (Dificuldade: ★)

Três níveis de aninhamento vertical — a demonstração mais intuitiva de "pai-filho".

Abreviação:

HTML 
nav>ul>li

Expande para:

HTML 
<nav>
  <ul>
    <li></li>
  </ul>
</nav>

Saída:

TEXT 📖 Somente leitura 
Um esqueleto de navegação de 3 níveis: nav envolve ul, ul envolve li. Cada `>` indenta um nível mais fundo. Simples como é, esta abreviação demonstra a forma mais básica do Emmet de expressar "pai-filho" — todas as estruturas mais complexas são construídas sobre esta base com a adição de outros operadores.

▶ Exemplo: Elementos Irmãos h1+p (Dificuldade: ★)

+ coloca duas tags como irmãos adjacentes.

Abreviação:

HTML 
h1+p

Expande para:

HTML 
<h1></h1>
<p></p>

Saída:

TEXT 📖 Somente leitura 
Duas tags no mesmo nível de indentação, lado a lado. Esta estrutura é comum em páginas de artigo: um título seguido por um parágrafo. `+` não cria um novo "contêiner externo" — simplesmente coloca elementos como irmãos ao lado do elemento anterior.

> desce, + acrescenta no mesmo nível — escrevendo 5 níveis de estrutura mista em uma linha. Note que p e footer ambos se tornam filhos de main (porque + não sai do nível atual).

Abreviação:

HTML 
div>header>h1+nav+main>p+footer

Expande para:

HTML 
<div>
  <header>
    <h1></h1>
    <nav></nav>
    <main>
      <p></p>
      <footer></footer>
    </main>
  </header>
</div>

Saída:

TEXT 📖 Somente leitura 
Caminho de análise: abaixo de div está header (>); dentro de header estão três irmãos — h1, nav, main (+ consecutivos); o ponto de descida mais recente é main, então main contém p e footer. Nota: footer aqui não é o rodapé do nível da página — ele se torna filho de main, uma armadilha clássica de misturar ">" e "+". Para fazer footer ser irmão de header e main, você precisa do operador de subida ^ (próxima aula).

▶ Exemplo: Aninhamento Multinível + Multiplicação article>section>p*3 (Dificuldade: ★)

> desce múltiplos níveis, *3 repete o p final 3 vezes. Isso antecipa o operador * da aula 5 — as regras completas de multiplicação são abordadas lá.

Abreviação:

HTML 
article>section>p*3

Expande para:

HTML 
<article>
  <section>
    <p></p>
    <p></p>
    <p></p>
  </section>
</article>

Saída:

TEXT 📖 Somente leitura 
`*3` aplica-se a `p`, repetindo-o 3 vezes — note que todos os 3 elementos p são filhos diretos de section e irmãos entre si. `article>section` desce duas vezes (2 níveis de indentação), depois repete 3 parágrafos dentro de section. Para também repetir section, a abreviação deveria ser `article>(section>p*3)*2` (usando agrupamento com parênteses, abordado na aula 6).

▶ Exemplo: Estrutura Completa de Página body>header+main+footer (Dificuldade: ★★)

O esqueleto clássico de página HTML5 — 4 tags de nível superior, com body como raiz e header/main/footer como três irmãos.

Abreviação:

HTML 
body>header+main+footer

Expande para:

HTML 
<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

Saída:

TEXT 📖 Somente leitura 
O esqueleto padrão de três seções HTML5: header no topo, main no meio, footer no final — todos filhos diretos de body. Esta é a "abreviação de estrutura" para a maioria dos sites modernos. Memorize-a como ponto de partida para qualquer página. A partir daqui, desça em header e main para preencher o conteúdo.

6. Exemplo Completo: Um Esqueleto de Página de Artigo de Blog

Combine > e + para construir uma estrutura semanticamente completa de página de artigo de blog.

▶ Exemplo: Esqueleto de Página de Artigo de Blog (Dificuldade: ★★)

Abreviação:

HTML 
body>header+main>article>(header>h1+p.time)+section*3>p+aside>ul>li*3+footer

Expande para:

HTML 
<body>
  <header></header>
  <main>
    <article>
      <header>
        <h1></h1>
        <p class="time"></p>
      </header>
      <section>
        <p></p>
      </section>
      <section>
        <p></p>
      </section>
      <section>
        <p></p>
      </section>
      <aside>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </aside>
      <footer></footer>
    </article>
  </main>
  <footer></footer>
</body>

Saída:

TEXT 📖 Somente leitura 
Chave para analisar esta linha: começando de body, primeiro desça para main (>), main contém article (desça novamente com >). Dentro de article, parênteses agrupam header (contendo h1 e p.time) como uma subárvore independente, depois `*3` repete 3 sections (cada uma contendo p). Finalmente, `+` dispõe aside e footer horizontalmente. Nota: o footer mais externo é irmão de header e main; article também tem seu próprio footer interno em um nível de indentação diferente. Este é o caso mais típico de aninhamento e irmãos misturados.

❓ Perguntas Frequentes

P: Qual tem prioridade mais alta, > ou +? R: > é sempre analisado primeiro. Quando o Emmet encontra >, ele empurra os elementos subsequentes para um novo nível; + apenas acrescenta irmãos dentro do nível atual. Para "dispor horizontalmente primeiro, depois descer" ou "descer primeiro, depois voltar a subir", você precisa do operador de subida ^ (aula 5) ou agrupamento () (aula 6).

P: Em a>b+c, b e c são irmãos? R: Sim. a>b+c expande para <a><b></b><c></c></a> — b e c são ambos filhos de a, irmãos entre si, mas todos dentro de a. O + não faz c escapar de a.

P: Por que footer acaba dentro de main em div>header>h1+nav+main>p+footer? R: Porque o > mais recente empurrou o contexto para dentro de main, e + por padrão acrescenta irmãos no nível atual (dentro de main). Então footer se torna filho de main em vez de irmão de header/main. Este tipo de "aninhamento acidental" requer o operador de subida ^ para corrigir (aula 5).

P: Posso usar espaços em vez de > e +? R: Não. Espaços são "símbolos de parada" no Emmet — o Emmet para de analisar quando encontra um espaço. div p e div>p são completamente diferentes: o primeiro não expande de forma alguma, enquanto o último expande para uma estrutura aninhada. Se você quiser "formatar" sua abreviação no editor para legibilidade, a abordagem oficial atual é usar parênteses para agrupamento (aula 6).

📖 Resumo

📝 Exercícios

  1. Básico (Dificuldade: ★): Escreva 4 abreviações Emmet que expandam para: (a) um div contendo um p; (b) h1 e p como irmãos; (c) nav contendo ul, com ul contendo 3 li; (d) body contendo header, main e footer como três irmãos.
  2. Intermediário (Dificuldade: ★★): Analise a abreviação div>(header>ul>li*2>a)+footer>p (não se apresse em escrever a resposta — primeiro esboce a hierarquia no papel), liste todos os relacionamentos pai-filho e depois expanda no editor para verificar.
  3. Desafio (Dificuldade: ★★★): Use uma única abreviação Emmet para expandir um esqueleto completo de "página de destino de produto" — contendo uma navegação superior, seção hero, 3 cartões de recursos e um rodapé inferior. Explique por que o número de operadores > e + determina a profundidade final do aninhamento, e escreva pelo menos 3 versões simplificadas equivalentes (usando parênteses ou subida).
Web-Tutorial.com

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.

100%