Emmet: Conteúdo de Texto `{text}` e Zero à Esquerda com…
Através das primeiras 8 aulas, você aprendeu os 8 operadores de estrutura HTML do Emmet (
>+^*().class#id[attr]) e 1 operador de numeração ($). Mas dois cenários "semânticos" ainda estão não resolvidos — "colocar 'Clique aqui' dentro de um botão" e "10 cartões com conteúdo numerado 001, 002". O primeiro é resolvido por{text}inserção de conteúdo de texto, e o último por zero à esquerda com múltiplos$. Esta aula combina esses dois operadores, elevando suas abreviações de "construir estrutura" para "gerar conteúdo".
1. O Que Você Vai Aprender
- Sintaxe de conteúdo de texto
{text}com chaves (incluindo escape automático de caracteres especiais) {text}adjacente ao pai vs.>{text}aninhado: a diferença entre os dois "modos de posição"- Combinando numeração
$com{text}: cada linha de conteúdo recebe um número (item 1, item 2, ...) - Zero à esquerda com múltiplos dígitos
$$$$$$$$$: gerar automaticamente 001, 002, 003 - Valor inicial
$@Ne reversa$@-: iniciar numeração de um valor especificado, ou contar de trás para frente
2. A História Real de Uma Desenvolvedora Front-End
(1) A Dor: As Tags Estão Construídas, Mas o Conteúdo Ainda Precisa Ser Digitado Caractere por Caractere
Alice estava construindo uma seção "Vitrine de Recursos" para uma página de destino de produto, exigindo 6 cartões, cada um contendo um ícone, título, descrição e botão. Ela primeiro escreveu a estrutura dos cartões usando () e tags implícitas da Aula 06:
section.features>(.card*6>i.icon+h3+p+button.btn)
A estrutura foi feita em 1 linha — o Emmet expandiu 6 cartões, cada um com um ícone, h3, p e button. Mas então Alice teve que escrever o conteúdo de cada cartão: títulos como "Alto Desempenho", "Facilidade de Uso", "Escalável", "Seguro", "Multiplataforma", "Código Aberto", uma descrição de 30 caracteres para cada, e o texto do botão "Saiba Mais" repetido 6 vezes.
Alice começou manualmente — HTML expandido com mais de 30 tags vazias, preenchendo o conteúdo uma a uma. Apenas os títulos levaram 5 minutos, as descrições mais 10, e finalmente ela digitou "Saiba Mais" 6 vezes (ou apenas copiou e colou).
Pior ainda era a paginação: uma lista de produtos de 100 páginas com <li>Página 1</li> até <li>Página 100</li> no final de cada página. Alice desistiu após 30 linhas. Ela tentou usar $: (ul.pagination>li>a{Página $})*100 — a expansão deu "Página 1" até "Página 100", mas as páginas 1–9 saíram como números de dígito único, parecendo um bug. Ela queria "01", "02", ..., "99", "100" — as primeiras 9 páginas precisavam de zero à esquerda de dois dígitos, enquanto o resto poderia exibir normalmente.
(2) Como {text} e Zero à Esquerda com Múltiplos $ Resolvem Isso
O Emmet fornece dois mecanismos complementares:
Conteúdo de texto {text}: O conteúdo dentro de chaves é inserido como um nó de texto dentro da tag. Os 6 cartões de Alice poderiam ser escritos como:
section.features>(.card*6>(i.icon)+h3{Alto Desempenho}+p{Esta é a primeira descrição}+button.btn{Saiba Mais})
Mas com 6 cartões cada um precisando de conteúdo diferente, *6 não pode simplesmente repetir o mesmo texto — é aqui que modelos de laço com numeração $ entram.
Numeração $ e zero à esquerda com múltiplos dígitos: $ é o número de sequência atual; $$ preenche com zero à esquerda para 2 dígitos; $$$ preenche com zero à esquerda para 3 dígitos. A paginação de Alice pode ser escrita como:
(ul.pagination>li>a{Página $$})*100
Que expande para "Página 01", "Página 02", ..., "Página 99", "Página 100" — as primeiras 9 são auto-preenchidas com zero à esquerda para 2 dígitos, e da página 10 em diante exibem normalmente.
Alice reescreveu toda a seção de Recursos em uma linha:
section.features>(h2{Recursos do Produto})+((.card>(i.icon)+h3{Recurso $}+p{Esta é a descrição do recurso $ de 6}+button.btn{Saiba Mais})*6)
E a paginação de 100 linhas:
(ul.pagination>li>a{Página $$})*100
Alice verificou e exclamou: "O conteúdo de 6 cartões foi de 30 linhas escritas manualmente para 1 linha, e a paginação de 100 linhas foi de 200 linhas para 1 linha. O aumento de eficiência do Emmet em cenários de geração de conteúdo em lote é de 50 vezes ou mais."
(3) Benefícios
{text} e zero à esquerda com múltiplos $ são o núcleo do Emmet para lidar com cenários de "fábrica de conteúdo". O primeiro permite escrever conteúdo diretamente na abreviação (sem necessidade de preenchê-lo após a expansão), enquanto o último faz os números dos elementos repetidos rodarem automaticamente, preencherem com zero, iniciarem de e contarem de trás para frente. Após esta aula, Alice pode escrever 6 cartões de recursos em 15 segundos e paginação de 100 páginas em 10 segundos. Esta aula também inicia a Fase 3 — a próxima aula aborda texto placeholder Lorem Ipsum e detalhes de tags implícitas.
3. Definição de Conteúdo de Texto {text}
{text} é a sintaxe do Emmet para inserir um nó de texto dentro de uma tag. O conteúdo dentro de chaves se torna o texto interno da tag literalmente — pode incluir quaisquer caracteres (chinês, espaços, pontuação, etc.).
(1) Regras de Atalho
| Abreviação | Expansão | Observações |
|---|---|---|
a{Clique aqui} |
<a href="">Clique aqui</a> |
Tag única + bloco de texto único |
p{Olá mundo} |
<p>Olá mundo</p> |
Tag p + texto |
button{Enviar} |
<button>Enviar</button> |
Funciona em qualquer idioma |
a{<strong>negrito</strong>} |
<a href=""><strong>negrito</strong></a> |
< e > escapados automaticamente para entidades HTML |
Ponto-Chave: Caracteres especiais (
<>&) dentro de{text}são escapados automaticamente pelo Emmet para entidades HTML (<>&). Este é um requisito de segurança do HTML5 — prevenir que a entrada do usuário com colchetes angulares quebre a estrutura do documento. Se você quiser inserir tags HTML reais (para que<strong>seja analisado como uma tag em vez de texto), você precisará dos "filtros" abordados na Aula 13, ou editar manualmente após a expansão.
(2) Onde {text} Pode Ser Colocado Dentro de Uma Tag
| Posição | Abreviação | Expansão |
|---|---|---|
| Adjacente ao nome da tag | a{Clique aqui} |
<a href="">Clique aqui</a> |
Com aninhamento > |
p>{Clique }+a{aqui} |
<p>Clique <a href="">aqui</a></p> |
{text} puro |
{ para continuar} |
para continuar (texto puro, como um elemento independente) |
Com numeração $ |
li{item $}*3 |
<li>item 1</li>, <li>item 2</li>, <li>item 3</li> |
4. Duas Posições para {text}: Adjacente ao Pai vs. Aninhado
Este é o design mais refinado no sistema de conteúdo de texto do Emmet. Quando {text} segue imediatamente um nome de tag, ele não muda o contexto pai; mas >{text} empurra o contexto um nível mais fundo. A diferença é a armadilha mais comum para iniciantes.
(1) Modo Adjacente: a{clique}+b{aqui}
Quando {text} segue imediatamente um nome de tag (sem um prefixo >), o texto é tratado como um filho direto dessa tag, mas não muda o contexto pai — significando que elementos irmãos + subsequentes permanecem no mesmo nível da tag atual.
a{clique}+b{aqui}
<a href="">clique</a><b>aqui</b>
(2) Modo Aninhado: a>{clique}+b{aqui}
Quando {text} é precedido por >, o Emmet trata o >{text} como um elemento filho e empurra o contexto pai para dentro de a — elementos irmãos + subsequentes são acrescentados dentro de a.
a>{clique}+b{aqui}
<a href="">clique<b>aqui</b></a>
(3) Texto Misto de Múltiplos Elementos: p{Clique }+a{aqui}+{ para continuar}
Este exemplo clássico da documentação oficial demonstra a diferença entre os dois modos:
p{Clique }+a{aqui}+{ para continuar}
<p>Clique </p>
<a href="">aqui</a> para continuar
p>{Clique }+a{aqui}+{ para continuar}
<p>Clique <a href="">aqui</a> para continuar</p>
Ponto-Chave: A primeira abreviação (modo adjacente) produz 3 elementos no nível raiz (p, a, texto puro), enquanto a segunda (modo aninhado) coloca todo o "Clique aqui para continuar" dentro de
<p>. A diferença vem do>: na primeira versão,{Clique }faz p se tornar um "p com texto clique" (sem descer), enquanto o>{Clique }da segunda versão empurra o contexto de p para o interior de p, então os+a{aqui}e+{ para continuar}subsequentes são ambos acrescentados dentro de p.
▶ Exemplo: Conteúdo de Texto Básico a{Clique aqui} (Dificuldade ⭐)
O primeiro exemplo de conteúdo de texto da documentação oficial do Emmet — adicionando um bloco de texto a uma tag a.
Abreviação:
a{Clique aqui}
Expansão:
<a href="">Clique aqui</a>
Saída:
TEXT 📖 Somente leituraDetalhamento: a é o nome da tag (que por padrão inclui href=""), e {Clique aqui} é o nó de texto. O Emmet automaticamente adiciona o atributo href="" a a (comportamento padrão HTML5), e o texto "Clique aqui" se torna o nó filho de a. Nota: {text} após a tag a não muda o contexto pai — se seguido por +b{algum}, b será irmão de a, não filho de a.
▶ Exemplo: Texto Misto de Múltiplos Elementos p>{Clique }+a{aqui}+{ para continuar} (Dificuldade ⭐⭐)
Use o modo aninhado para colocar todo o "Clique aqui para continuar" dentro de <p>.
Abreviação:
p>{Clique }+a{aqui}+{ para continuar}
Expansão:
<p>Clique <a href="">aqui</a> para continuar</p>
Saída:
TEXT 📖 Somente leituraDetalhamento: p>{Clique } empurra o contexto para dentro de p, e "Clique " se torna o primeiro filho de texto de p; +a{aqui} acrescenta um a com texto "aqui" dentro de p; +{ para continuar} acrescenta o texto puro " para continuar" dentro de p. O p final contém 3 filhos: texto "Clique ", uma tag a e texto " para continuar". Sem > (isto é, p{Clique }+a{aqui}+{ para continuar}), p conteria apenas "Clique ", e a e o texto puro se tornariam irmãos no nível raiz — resultando em <p>Clique </p> seguido por <a>aqui</a> e texto puro.
5. Numeração $ e Zero à Esquerda com Múltiplos Dígitos
$ é o placeholder de numeração do Emmet (introduzido na Aula 08). Esta aula o estende com dois usos avançados: zero à esquerda com múltiplos dígitos e controle de início/reversa.
(1) Zero à Esquerda com Múltiplos Dígitos $$ $$$ $$$$
A Aula 08 usou um único $ para gerar 1, 2, 3. Quando o intervalo de números excede 9 (ex.: 100 números de linha de tabela), um único $ exibe larguras de dígitos misturadas: 1, 2, ..., 9, 10, 11. Múltiplos caracteres $ fazem a numeração preencher automaticamente com zero até uma largura mínima fixa:
Contagem de $ |
Forma Expandida (*5) |
Caso de Uso |
|---|---|---|
$ |
1, 2, 3, 4, 5 | Listas simples |
$$ |
01, 02, 03, 04, 05 | Listas pequenas, meses |
$$$ |
001, 002, 003, 004, 005 | Números de pedido, IDs de linha de tabela |
$$$$ |
0001, 0002, ... | Tabelas de mil linhas, números de capítulo |
Ponto-Chave: O número de caracteres
$determina a largura mínima de preenchimento. Se o número real exceder essa largura, o Emmet não trunca —*12com$$expande para01, 02, ..., 09, 10, 11, 12(os primeiros 9 são preenchidos com zero; os últimos 3 exibem normalmente). Esta semântica é "largura de preenchimento = largura mínima, não máxima".
(2) Valor Inicial $@N e Reversa $@-
Por padrão, a numeração começa de 1 crescente. Use @N para começar de N, e @- para decrescente:
| Modificador | Significado | Exemplo (*5) |
|---|---|---|
$ (padrão) |
Crescente, de 1 | 1, 2, 3, 4, 5 |
$@3 |
Crescente, de 3 | 3, 4, 5, 6, 7 |
$@- |
Decrescente (contagem de iteração → 1) | 5, 4, 3, 2, 1 |
$@-3 |
Decrescente, de 3 para trás | *5 → 7, 6, 5, 4, 3 (baseado no início @-3 + sobreposição de contagem de iteração) |
Nota:
$@-3é suportado no Emmet 1.2+. Combinações comuns são$@N(valor inicial) e$@-(decrescente começando da contagem de iteração). Em@N, N é o valor inicial, não o valor final.
▶ Exemplo: Numeração + Texto ul>li{item $}*3 (Dificuldade ⭐)
Incorpore $ dentro de {text} para que o conteúdo de cada li carregue um número automático.
Abreviação:
ul>li{item $}*3
Expansão:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
Saída:
TEXT 📖 Somente leituraDetalhamento: li{item $} é "uma tag li + um bloco de texto (item + número atual)", e *3 repete este modelo 3 vezes. Cada repetição substitui $ pelo número de iteração atual (1, 2, 3). Os 3 elementos li finais contêm cada um um bloco de texto "item N". Este é o padrão central do Emmet para cenários como listas de tarefas, listas de recursos e numeração de FAQ. Nota: o espaço após "item" é parte do texto (não um operador).
▶ Exemplo: Zero à Esquerda ul>li{$$}*5 (Dificuldade ⭐)
Zero à esquerda de 2 dígitos — os primeiros 9 elementos preenchem automaticamente com zero; números além de 9 exibem normalmente.
Abreviação:
ul>li{$$}*5
Expansão:
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
Saída:
TEXT 📖 Somente leituraDetalhamento: $$ significa "exibir o número atual com 2 dígitos". *5 repete li 5 vezes, com valores $ de 1, 2, 3, 4, 5 — após zero à esquerda de 2 dígitos, eles se tornam 01, 02, 03, 04, 05. Com *12, a expansão seria 01, 02, ..., 09, 10, 11, 12 — os primeiros 9 são preenchidos com zero, enquanto os últimos 3 excedem 2 dígitos e exibem normalmente (sem truncamento). Cenários de zero à esquerda: números de página de paginação, meses, códigos SKU de produtos.
▶ Exemplo: Valor Inicial + Reversa ol>li{Passo $@3}*5 (Dificuldade ⭐⭐)
Um processo de 5 passos começando de 3 — use $@3 para controlar o valor inicial.
Abreviação:
ol>li{Passo $@3}*5
Expansão:
<ol>
<li>Passo 3</li>
<li>Passo 4</li>
<li>Passo 5</li>
<li>Passo 6</li>
<li>Passo 7</li>
</ol>
Saída:
TEXT 📖 Somente leituraDetalhamento: $@3 significa "o número atual começa de 3". ol>li faz li ser filho ordenado de ol; {Passo $@3} é o modelo de texto onde "Passo " é uma string fixa e $@3 é o número atual começando de 3. *5 repete li 5 vezes, com números 3, 4, 5, 6, 7. Este é o padrão padrão do Emmet para cenários como "paginação começando de uma certa página", "capítulos de produto começando do capítulo 3" e "números de passo não começando de 1". Para reversa (de 5 para 1), use $@- em vez disso (retrocede automaticamente com base na contagem de iteração).
6. Exemplo Completo: Paginador + Numeração + Conteúdo de Texto
Combine {text}, zero à esquerda com múltiplos $ e valor inicial $@N — um paginador de 100 páginas com cada página exibida em formato de zero à esquerda de 2 dígitos.
▶ Exemplo: Paginador de 100 Páginas (Dificuldade ⭐⭐)
Abreviação:
(ul.pagination>li.page$$>a{Página $$})*100
Expansão (trecho):
<ul class="pagination">
<li class="page01"><a href="">Página 01</a></li>
<li class="page02"><a href="">Página 02</a></li>
<li class="page03"><a href="">Página 03</a></li>
<!-- ... -->
<li class="page09"><a href="">Página 09</a></li>
<li class="page10"><a href="">Página 10</a></li>
<li class="page11"><a href="">Página 11</a></li>
<!-- ... -->
<li class="page99"><a href="">Página 99</a></li>
<li class="page100"><a href="">Página 100</a></li>
</ul>
Saída:
TEXT 📖 Somente leituraDetalhamento: este exemplo combina todos os operadores desta aula — {} (conteúdo de texto), $ (numeração), $$ (zero à esquerda de 2 dígitos), () (agrupamento), * (multiplicação), .class, > (aninhamento). Os parênteses externos tornam todo o modelo li uma unidade repetível; li.page$$ usa $$ tanto no nome da classe quanto no {text}, garantindo que os números da classe e do conteúdo permaneçam sincronizados; a tag a atua como filho de li com conteúdo "Página XX". Nota: o HTML real para 100 páginas tem 100 elementos li; este trecho mostra apenas os primeiros 3, 9–11 e 99–100. Largura de preenchimento = 2: páginas 1–9 são 01–09, e da página 10 em diante os números excedem 2 dígitos e exibem normalmente (10, 11, ...). Para zero à esquerda de 3 dígitos (001–100), use $$$ em vez disso.
❓ Perguntas Frequentes
P: O que acontece com colchetes angulares
<>dentro de{text}? R: O Emmet os escapa automaticamente para entidades HTML —<se torna<,>se torna>e&se torna&. Este é um requisito de segurança do HTML5 para prevenir que a entrada do usuário quebre a estrutura do documento. Entãoa{<strong>negrito</strong>}expande para<a href=""><strong>negrito</strong></a>(colchetes angulares se tornam caracteres de entidade; o navegador exibe o texto literal "<strong>negrito</strong>" sem analisá-lo como uma tag). Para inserir tags HTML reais, use filtros ou edite manualmente após a expansão.
P: Qual é a diferença principal entre
a{clique}+b{aqui}ea>{clique}+b{aqui}após a expansão? R: O primeiro (modo adjacente) produz dois irmãos no nível raiz:<a>clique</a><b>aqui</b>. O último (modo aninhado) incorpora<b>dentro de<a>:<a>clique<b>aqui</b></a>. A diferença crítica é o>: o modo adjacente não muda o contexto pai; o modo aninhado empurra o contexto um nível mais fundo. O mnemônico é: "se há um>antes da chave, desça um nível; se não, permaneça no nível atual." Este é o design mais refinado no sistema de conteúdo de texto do Emmet e uma fronteira que todo iniciante deve dominar.
P:
$pode aparecer múltiplas vezes dentro do mesmo bloco{text}? Múltiplos símbolos$produzem o mesmo número ou números diferentes? R: Podem aparecer múltiplas vezes, e todos os símbolos$dentro do mesmo bloco{text}compartilham o mesmo número (a contagem de iteração atual). Por exemplo,li{item $: número $}*3expande para<li>item 1: número 1</li>,<li>item 2: número 2</li>,<li>item 3: número 3</li>. Múltiplos$são usados principalmente para controle de largura de preenchimento ($para número bruto,$$para zero à esquerda de 2 dígitos,$$$para zero à esquerda de 3 dígitos). Para ter símbolos$diferentes dentro do mesmo elemento produzindo números diferentes (ex.: i=1, j=2), você precisa de estruturas de repetição*aninhadas.
P: N em
$@Npode ser um número negativo? O que N=0 significa? R: N pode ser negativo ou 0.$@-5*3significa crescente de -5 (-5, -4, -3);$@0*3significa crescente de 0 (0, 1, 2). No entanto, números negativos e 0 raramente são usados como valores iniciais na prática (números de sequência negativos não têm significado em HTML, e começar de 0 pula o 1). Uso comum:$@1explicitamente começa de 1 (equivalente ao padrão, mas mais explícito no código), e$@100começa de 100 (cenários de paginação profunda). Use$@-para reversa; não misture$@-Na menos que necessário.
📖 Resumo
{text}é a sintaxe de conteúdo de texto; o conteúdo dentro de chaves se torna o nó de texto da tag (ex.:li{item $}*3→ "item 1", "item 2", "item 3")<>&dentro de{text}são escapados automaticamente para entidades HTML (<>&)- Modo adjacente
a{text}não muda o contexto pai; modo aninhadoa>{text}empurra o contexto um nível mais fundo $é o placeholder de numeração; múltiplos$preenchem automaticamente com zero à esquerda:$$= 2 dígitos,$$$= 3 dígitos,$$$$= 4 dígitos (largura de preenchimento = largura mínima; sem truncamento quando excedida)$@Ninicia a numeração de N;$@-produz numeração decrescente (baseada na contagem de iteração)
📝 Exercícios
- Básico (Dificuldade ⭐): Escreva abreviações Emmet de uma linha que expandam para: (a) uma tag
button{Cadastrar}; (b) uma tag<strong>com texto "Aviso"; (c) um parágrafop>lorem(isto é,<p>Lorem ipsum...</p>, não abordado nesta aula; Lorem é abordado na próxima aula). - Intermediário (Dificuldade ⭐⭐): Escreva uma "Lista de Meses" de 12 itens
ol>li{Mês $$}*12e verifique a expansão (deve ser "Mês 01" até "Mês 12"). Depois reescreva como uma "Lista de Trimestres"ol>li{Trimestre $}*4, verificando a numeração de 1–4. Finalmente, escreva uma "Seção de Recursos do Produto" com 5 cartões, cada um contendo<h3>Recurso $</h3>e<p>Descrição do recurso $</p>, tudo em uma linha Emmet. - Desafio (Dificuldade ⭐⭐⭐): Escreva um paginador de 100 páginas com zero à esquerda de 3 dígitos (
Página 001atéPágina 100). Requisitos: (a) classe usandopage$$$(zero à esquerda de 3 dígitos); (b) texto usandoPágina $$$(zero à esquerda de 3 dígitos); (c) página inicial usando$@1(mesmo comportamento do padrão, mas explicitamente declarado). Verifique a expansão em uma linha Emmet e explique por que$$$não trunca números além de 99 (dica: zero à esquerda do Emmet = largura mínima, não largura máxima).
