Emmet: Envolver com Abreviação

Na lição 14 você aprendeu a expandir uma única linha abreviada em HTML completo. Mas no desenvolvimento real, o cenário de já ter código escrito é muito mais comum — por exemplo, você já escreveu vários itens <li> e de repente percebe que está faltando um wrapper externo <ul>. Adicionar manualmente o wrapper significa repetir de 4 a 5 linhas por ocorrência. Esta lição ensina a ação Wrap with Abbreviation de Emmet - selecionar código + digitar abreviação = encapsulamento com um clique. Esta é a segunda ação central nas operações editoriais de Emmet.

1. O Que Você Vai Aprender

• O mecanismo principal de Envolver com Abreviação: selecione código + atalho = envolvimento
• Métodos de acionamento: Paleta de Comandos do VSCode (Ctrl+Shift+P → Emmet: Envolver com Abreviação); WebStorm Ctrl+Alt+J, Sublime Ctrl+Shift+G, etc.
• Envolvimento de elemento único: <p>texto</p> → envoltório externo com um clique com div.wrapper
• Envolvimento em lote de múltiplas linhas: selecione 3 linhas → ul>li*3 reestruturação em lote
• Envolvimento aninhado: selecione texto → a[href="..."] inserção de link com um clique

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

(1) Ponto de Dor: Você Escreveu o HTML, Depois Percebe Que Esqueceu o Envoltório Externo

Alice herda código do seu colega Bob. Bob escreveu o módulo "Posts Relacionados" de um blog, mas esqueceu de envolvê-lo com <ul>:

<li><a href="/post-1">Introdução ao Vue 3</a></li>
<li><a href="/post-2">React Hooks na Prática</a></li>
<li><a href="/post-3">TypeScript Avançado</a></li>

Alice quer adicionar um <ul class="related-posts"> para envolver os 3 itens <li>. Ela tenta fazer manualmente: copiar a tag de abertura <ul> antes do primeiro <li>, copiar </ul> após o terceiro <li> — 2 operações de copiar e colar. Se houver 5 lacunas desse tipo na base de código (página de post do blog, página de lista, página de detalhes, página de arquivo, página de busca), são 10 operações de copiar e colar + 5 verificações de ortografia de nome de classe.

Pior ainda, ela frequentemente comete erros: colar </ul> após um <li> acidentalmente o coloca no meio (<li><a>...</a></li></ul>), quebrando a estrutura DOM. Alice pensa: é literalmente apenas "adicionar um envoltório externo" — por que é tão tedioso? Não existe um método de "selecionar + digitar atalho = envolvimento em 1 etapa"?

(2) A Solução de Envolver com Abreviação

Envolver com Abreviação é o "Expandir Abreviação reverso" do Emmet — não expandindo do zero, mas adicionando um envoltório ao redor do código existente.

A solução da Alice:

1. Selecionar todos os 3 elementos <li> (selecionar coluna com Alt+arrastar mouse ou Ctrl+L para selecionar linhas)
2. Pressionar Shift+Alt+, para acionar Envolver
3. Digitar o atalho ul.related-posts>
4. Expande automaticamente para a estrutura completa com o <ul> externo

Com esta única técnica, Alice reduz a correção de 5 envoltórios faltantes de 10 operações de copiar e colar + 5 verificações para 5 operações "selecionar + Envolver". Melhoria de velocidade de 3–5x, com zero erros de digitação (o Emmet gera automaticamente os nomes de classe).

(3) Benefícios

Envolver com Abreviação é a "ponte" nas operações de editor do Emmet — acelerando o fluxo de trabalho "escrever primeiro, otimizar depois" em 3–5x. Combinado com Expandir Abreviação da aula 14 (expandindo do zero) e Balancear/Próximo Ponto de Edição da aula 16 (aceleração de edição), o fluxo de trabalho completo do Emmet "entrada → expandir → editar → envolver" está agora implementado. Após esta aula, o tempo da Alice para adicionar envoltórios, inserir contêineres e reestruturar em lote cai de 5 minutos para 1 minuto.

3. Definição Principal de Envolver com Abreviação

Envolver com Abreviação é a ação do Emmet para reescrever código existente — envolvendo fragmentos de código selecionados com um novo atalho.

4. Métodos de Acionamento: Comparação entre Editores

Envolver com Abreviação tem teclas de acionamento significativamente diferentes entre editores, porque esta ação é relativamente nova (adicionada após 2013) e o progresso da implementação varia por editor.

5. Quatro Modos de Envolvimento

Envolver com Abreviação suporta 4 modos de envolvimento, cobrindo 4 necessidades comuns: adicionar um envoltório externo, adicionar irmãos, reestruturar em lote e envolver aninhado.

(1) Envolvimento de Elemento Único: Adicionar uma Camada Externa

Selecione 1 elemento, envolva com 1 atalho. Cenário comum: originalmente <p>texto</p>, agora precisa ser envolvido dentro de <div class="wrapper">.

(2) Envolvimento em Lote de Múltiplas Linhas: Selecione N Linhas → Reestruture em Lote

Selecione múltiplas linhas consecutivas, use * para marcar elementos repetidos. A diferença chave é * sem número — significando "repetir automaticamente com base na contagem de linhas selecionadas".

(3) Envolvimento Aninhado: Selecione Texto → Adicione Tag Interna

Selecione um trecho de texto ou uma tag, use um atalho para incorporá-lo dentro de um novo elemento. Este é o padrão comum para "adicionar links, adicionar estilos, adicionar semântica".

(4) Envolvimento Combinado: Selecione + Aninhe + Múltiplos Atributos

Use simultaneamente seleção + aninhamento + atributos personalizados + múltiplas classes. Esta é a "forma definitiva" do Envolver.

6. Exemplos Práticos

Os 4 exemplos a seguir cobrem os 4 modos de envolvimento de Envolver com Abreviação.

▶ Exemplo: Envolvimento de Elemento Único <p>texto</p> → div.wrapper (Dificuldade: ★)

O cenário mais comum de Envolver — adicionar um contêiner externo a um único elemento.

Código original (em um arquivo HTML):

<p>Hello World</p>

Passos:

1. Selecionar <p>Hello World</p> (arrastar com mouse ou Ctrl+L)
2. Pressionar Shift+Alt+, para acionar Envolver
3. Digitar o atalho div.wrapper
4. Pressionar Enter para confirmar

Expansão:

<div class="wrapper">
  <p>Hello World</p>
</div>

Saída:

TEXT 📖 Somente leitura

📋 Copy

Explicação: Após selecionar `<p>Hello World</p>` e invocar Envolver, o Emmet trata todo o `<p>` como o "conteúdo envolvido" e gera a estrutura externa a partir do atalho `div.wrapper`. Por padrão, Envolver coloca o conteúdo selecionado dentro do **último elemento** — aqui `<p>` se torna filho de `<div>`. Este é o cenário de envolvimento de elemento único mais direto: um `<p>` previamente isolado agora é envolvido por `<div class="wrapper">`. O Emmet auto-indenta — `<p>` é indentado por 2 espaços, consistente com as regras de tag implícita da aula 06. Esta única etapa substitui 5 operações manuais (copiar tag de abertura, colar, ajustar indentação, copiar tag de fechamento, colar).

▶ Exemplo: Envolvimento de Lista — Selecione 3 <li> → ul.nav (Dificuldade: ★★)

Envolvimento em lote de múltiplas linhas — selecione 3 itens <li> e envolva com um clique com um contêiner de navegação.

Código original:

<li><a href="/home">Início</a></li>
<li><a href="/about">Sobre</a></li>
<li><a href="/contact">Contato</a></li>

Passos:

1. Selecionar todas as 3 linhas (arrastar 3 linhas com mouse ou Ctrl+L para 1 linha + Ctrl+Shift+L para múltiplas linhas)
2. Pressionar Shift+Alt+, para acionar Envolver
3. Digitar o atalho ul.nav>
4. Pressionar Enter para confirmar

Expansão:

<ul class="nav">
  <li><a href="/home">Início</a></li>
  <li><a href="/about">Sobre</a></li>
  <li><a href="/contact">Contato</a></li>
</ul>

Saída:

TEXT 📖 Somente leitura

📋 Copy

Explicação: Selecione 3 linhas, invoque Envolver, digite `ul.nav>`. O Emmet trata `ul.nav>` como "as 3 linhas selecionadas se tornam filhas de ul". Nota: aqui **`>` é fundamental** — ele indica "conteúdo selecionado como filhos". Se o atalho fosse escrito como `ul.nav` (sem `>`), o Emmet colocaria os 3 elementos `<li>` como irmãos de `<ul>` (estrutura incorreta). `>` determina a "posição de envolvimento" — se é envolvimento de nó filho ou envolvimento de irmão. Regra comum: por padrão, use `>` para marcar explicitamente "envolvimento de nó filho"; use `+` para "adição de irmão".

▶ Exemplo: Envolvimento de Link — Selecione texto → a[href="..."] (Dificuldade: ★)

Envolvimento aninhado — selecione um trecho de texto e envolva-o com uma tag de link.

Código original:

<p>Visite nosso site para mais informações.</p>

Passos:

1. Selecionar nosso site (clique duplo ou arraste)
2. Pressionar Shift+Alt+, para acionar Envolver
3. Digitar o atalho a[href="https://exemplo.com"]
4. Pressionar Enter para confirmar

Expansão:

<p>Visite <a href="https://exemplo.com">nosso site</a> para mais informações.</p>

Saída:

TEXT 📖 Somente leitura

📋 Copy

Explicação: Selecione os 11 caracteres de `nosso site` (excluindo espaços ao redor), invoque Envolver, digite `a[href="https://exemplo.com"]`. O Emmet trata toda a tag `<a>` como o "modelo de envolvimento", com o conteúdo selecionado se tornando o texto dentro de `<a>`. Nota: este cenário não precisa de `>` — porque `<a>` é um nó folha (sem filhos para posicionar). **Detalhe chave**: em `a[href="..."]`, `href` é um atributo e o conteúdo envolvido é texto — `>` é desnecessário. Esta conversão "texto simples → texto dentro da tag" é extremamente comum no Emmet.

▶ Exemplo: Envolvimento Combinado — Selecione Welcome → header.container>h1.title (Dificuldade: ★★)

Envolvimento combinado — selecione + aninhe + classe personalizada + estrutura de múltiplas camadas.

Código original:

<h1>Welcome</h1>

Passos:

1. Clique duplo para selecionar o texto Welcome (apenas texto, não a tag <h1>)
2. Pressionar Shift+Alt+, para acionar Envolver (usuários VSCode: Paleta de Comandos Ctrl+Shift+P → Emmet: Envolver com Abreviação)
3. Digitar o atalho header.container>h1.title
4. Pressionar Enter para confirmar

Expansão:

<header class="container">
  <h1 class="title">Welcome</h1>
</header>

Saída:

TEXT 📖 Somente leitura

📋 Copy

Explicação: Este exemplo combina Wrap + Expand. `header.container>h1.title` inclui simultaneamente 3 mecanismos Emmet: ① `header.container` — tag + classe; ② `>` — aninhamento infantil; ③ conteúdo selecionado colocado dentro do último elemento (h1). Emmet expande de acordo com a estrutura de duas camadas "cabeçalho> h1", colocando o texto selecionado `Welcome` como o conteúdo do texto do último elemento (h1). Esta única etapa substitui 5 operações manuais: escrever `<header class="container">`, nova linha, escrever `<h1 class="title">`, escrever Bem-vindo, escrever `</h1></header>`. **Detalhe principal**: selecione **somente texto**, não toda a tag `<h1>...</h1>` — porque o padrão do Wrap é "colocar o conteúdo selecionado como está dentro do último elemento do snippet gerado" (documentos oficiais). Se você selecionar `<h1>Welcome</h1>` inteiro, o resultado será `<h1 class="title"><h1>Welcome</h1></h1>` (h1 aninhado, HTML inválido). **Observe o recuo**: Emmet recua automaticamente h1 em 2 espaços (o cabeçalho é o contêiner), consistente com as regras de aninhamento da lição 04.

7. Referência Rápida de Atalhos Comuns

Envolver com Abreviação usa os mesmos atalhos que Expandir Abreviação — qualquer atalho Emmet pode ser usado como parâmetro de Envolver. Aqui estão 4 tipos de atalho comumente usados:

❓ Perguntas Frequentes

P: Pressionar Shift+Alt+, não faz nada — o atalho padrão "Formatar" do VSCode aparece em vez disso? R: Verifique conflitos de atalho. Shift+Alt+F do VSCode é "Formatar Documento". Você pode ter se enganado — o atalho real de Envolver é Shift+Alt+, (tecla vírgula, à direita da tecla M). Se ainda não funcionar, use o alternativo da Paleta de Comandos: Ctrl+Shift+P → Emmet: Envolver com Abreviação.

P: Após Envolver, o conteúdo selecionado desaparece — por exemplo, selecionei <p> e após Envolver só resta o <div> externo? R: Isso geralmente acontece porque o atalho está faltando >. Por exemplo, div.wrapper sem > não produzirá uma estrutura aninhada — o Emmet apenas adicionará <div> como um "nó irmão ao lado do conteúdo selecionado". A regra principal de Envolver é "conteúdo selecionado = filho do último elemento" — você deve expressar explicitamente a "posição de envolvimento" usando >. Correção: reescreva o atalho como div.wrapper>.

P: Posso selecionar múltiplas linhas e especificar uma contagem de repetição personalizada? Por exemplo, selecionar 3 linhas mas querer 5 linhas de saída? R: Sim, mas você precisa usar *N explicitamente. ul>li*5 com 3 linhas selecionadas → 5 linhas de saída (ignorando a contagem de linhas selecionadas). Mas o padrão mais comum é * (sem número) = repetir automaticamente com base na contagem de linhas selecionadas. Este "auto pela contagem de linhas" é um recurso principal do Envolver — evita que você tenha que contar quantas linhas selecionou.

P: Para que serve o placeholder $#? Quando devo usá-lo? R: $# é o placeholder único de "posição de saída" do Envolver — ele controla onde o conteúdo selecionado é colocado no resultado do Envolver. Sintaxe: ul>li[title=$#]*>{$#}+img[alt=$#]. Este atalho significa: o conteúdo selecionado aparece em 3 lugares simultaneamente (atributo title de li, texto de li, atributo alt de img). Cenário comum: copiar um comentário CSS para atributo, texto e alt simultaneamente. Atalhos regulares não precisam de *; o Envolver regular só precisa colocar conteúdo no último elemento.

📖 Resumo

• Envolver com Abreviação é o "Expandir reverso" do Emmet — adiciona envolvimento ao código existente
• Teclas de acionamento: VSCode Shift+Alt+, (vírgula); outros editores Ctrl+Shift+A ou Ctrl+Alt+J
• 4 modos de envolvimento: envolvimento de elemento único, envolvimento em lote de múltiplas linhas, envolvimento aninhado, envolvimento combinado
• Núcleo do atalho: > determina "posição de envolvimento" (filho vs irmão); * determina "repetir pela contagem de linhas selecionadas"
• * sem número = repetir automaticamente com base na contagem de linhas selecionadas; *N especifica explicitamente a contagem
• Placeholder $#: permite que o conteúdo selecionado apareça em múltiplas posições do resultado do Envolver (atributos, texto, alt, etc.)

📝 Exercícios

1. Básico (Dificuldade: ★): No seu arquivo HTML, escreva um <p>Hello World</p> isolado, selecione-o, pressione Shift+Alt+, para acionar Envolver, digite div.wrapper e pressione Enter. Verifique se o resultado da expansão é <div class="wrapper"><p>Hello World</p></div>. Se incorreto, verifique se você esqueceu o >.

2. Intermediário (Dificuldade: ★★): Em um arquivo HTML, escreva 3 elementos <li> isolados (sem ul). Use Envolver para envolvimento em lote: (a) selecione todas as 3 linhas; (b) digite ul.nav> e verifique a saída; (c) depois use section.hero> para verificar o envolvimento de múltiplas linhas (sem necessidade de * — a própria seleção significa "como filhos de ul"). Registre os resultados da expansão de 3 operações de Envolver.

3. Desafio (Dificuldade: ★★★): No seu arquivo HTML, escreva um fragmento de post de blog (<h1>...</h1> + <p>...</p> + <p>...</p>). Use 3 operações de Envolver para transformá-lo em uma estrutura completa de cartão de blog: 1º Envolver header>h1 + 2º Envolver article.content>(p)* + 3º Envolver section.blog-post>. Registre o resultado final das 3 operações de Envolver (deve ser uma estrutura aninhada de 3 camadas) e escreva um relatório de comparação de velocidade "Envolver vs. Envolvimento Manual".

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