Emmet: Lorem Ipsum e Detalhes de Tags Implícitas

Ao longo das primeiras 9 aulas, você dominou todos os operadores de estrutura HTML + texto + numeração do Emmet e já consegue escrever HTML com aninhamento arbitrário, atributos arbitrários, numeração arbitrária e conteúdo arbitrário. Mas duas ferramentas poderosas de "economia de teclas" ainda não foram usadas — geração automática de texto placeholder Lorem Ipsum e as regras completas de nome de tag implícita. A primeira permite gerar 30 palavras de texto Lorem em 1 segundo (sem digitação manual), enquanto a segunda permite omitir os nomes de tag li/tr/td/option em contextos de elementos pai ul/table/select. Esta aula explica ambos os mecanismos em detalhes, servindo como a conclusão da Fase 3.

1. O Que Você Vai Aprender

• Gerador de Lorem Ipsum: lorem gera 30 palavras por padrão, loremN especifica N palavras
• Lorem com múltiplos parágrafos: p*3>lorem gera 3 parágrafos, cada um com texto independente
• Nomes de tag implícitos: troca automática nos contextos de elementos pai ul/ol/table/tr/select/dl
• Implícito + class + id: ul>.item → <li class="item">, table>#row1>.cell → <tr id="row1"><td class="cell">
• Limites das regras implícitas: quando o pai não está na lista permitida, o padrão continua sendo div (inclui conceito de personalização via snippets.json)

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

(1) Ponto de Dor: Texto Placeholder + Nomes de Tag Repetitivos Desaceleram o Desenvolvimento

Alice estava implementando um mockup de design para um template de blog. Ela precisava exibir uma "página de artigo de blog" padrão — título, informações do autor, 3 parágrafos de texto do corpo e uma nuvem de tags na barra lateral. Mas ela não sabia qual conteúdo escrever (a fase de design ainda não tinha conteúdo real) e não queria preencher com texto sem sentido (que parece falso).

Ela primeiro tentou copiar 30 palavras de texto Lorem Ipsum do lipsum.com e colar no primeiro <p>. Depois copiou outro bloco (conteúdo diferente) para o segundo <p> e colou. 3 parágrafos significavam 3 rodadas de copiar e colar, desperdiçando 3 minutos. Pior: no dia seguinte, ela precisava fazer a mesma coisa novamente — trabalho puramente repetitivo.

Ainda pior era a "nuvem de tags" da barra lateral — 15 links <a>, cada um apontando para #tag-design, #tag-css e assim por diante. Ela digitou manualmente:

<a href="" id="tag-design">#design</a>
<a href="" id="tag-css">#css</a>
<!-- ... mais 13 linhas -->

15 linhas de HTML levaram 5 minutos.

Finalmente, havia a seção de tabela — uma "tabela de exibição de dados" de 5 linhas × 4 colunas. Ela pensou: cada linha e coluna em uma tabela parece igual — será que posso apenas escrever nomes de classe (como .row, .cell) e deixar o Emmet preencher automaticamente <tr>, <td>? A resposta é sim (a Aula 06 cobriu isso), mas ela também queria "dentro de select, basta escrever .opt e ele se torna automaticamente <option>" e "dentro de dl, basta escrever .term e ele se torna automaticamente <dt>" — cenários que ela ainda não havia estudado sistematicamente.

(2) Como Lorem + Tags Implícitas Resolvem Isso

O Emmet fornece dois mecanismos complementares:

Gerador de Lorem Ipsum: Escreva lorem ou loremN em uma abreviação, e o Emmet expande automaticamente em 30 palavras (ou N palavras) de Lorem Ipsum. Os 3 parágrafos do corpo da Alice podem ser escritos como:

article>(p>lorem)*3

Três elementos <p>, cada um com 30 palavras de texto Lorem independente (não repetitivo).

Regras completas de nome de tag implícita: Em contextos específicos de elementos pai, omitir o nome da tag faz o Emmet trocar automaticamente para um elemento filho razoável — dentro de ul/ol, o padrão é li; dentro de table, é tr; dentro de tr, é td; dentro de select, é option; e dentro de dl, é dt/dd. A nuvem de tags da Alice pode ser escrita como:

ul.tag-cloud>(li.tag*3>a{#tag-$})

Tags implícitas eliminam a necessidade de digitar 70% dos nomes de tag repetidamente.

Alice reescreveu toda a página de artigo do blog usando Lorem + tags implícitas:

section.blog>(header>h1{Título do Blog: Emmet Aumenta Velocidade 5x}+p.meta{Por Alice · 2026-07-30})+(article>(p>lorem)*3)+(aside>ul.tag-cloud>(li.tag*3>a{#tag-$}))

Alice verificou e exclamou: "3 parágrafos de Lorem passaram de 3 minutos para 1 segundo, 15 links de tag de 5 minutos para 3 segundos, e a digitação de nomes de tag foi reduzida em 70%. O ganho de eficiência do Emmet em cenários de texto placeholder + tag semântica é de 50x ou mais."

(3) Benefícios

O Lorem Ipsum e as regras de tag implícita são o "núcleo de economia de teclas" do Emmet. O primeiro permite pular a etapa de "copiar e colar texto placeholder", enquanto o segundo permite pular "digitar repetidamente nomes de tag comuns". Após esta aula, Alice consegue escrever 3 parágrafos de Lorem em 1 segundo e 15 links de tag em 3 segundos. Esta aula também conclui a Fase 3 — a próxima fase (Fase 4) aborda atalhos CSS, estendendo as capacidades do Emmet de HTML para CSS.

3. Gerador de Texto Placeholder Lorem Ipsum

Lorem Ipsum é o texto placeholder padrão da indústria tipográfica, usado para demonstrações de layout desde o século XVI. O Emmet possui um gerador de Lorem integrado, acessível usando lorem ou lipsum como palavra-chave (são funcionalmente idênticos).

(1) Atalho lorem e loremN

Ponto Chave: O número imediatamente após lorem é usado diretamente como parâmetro de contagem de palavras (ex.: lorem5 = 5 palavras). Se nenhum número for fornecido, o padrão é 30 palavras. A contagem de palavras é medida por tokens separados por espaço, não por caracteres. O conteúdo real expandido pode variar ligeiramente entre editores (VSCode e WebStorm usam o mesmo parágrafo base de 30 palavras), mas a contagem de palavras é estritamente seguida.

(2) Combinando Lorem com Outros Operadores

4. Nomes de Tag Implícitos: Resumo Completo das Regras

As aulas 03 e 06 já introduziram o conceito de nomes de tag implícitos. Esta aula sistematiza todo o conjunto de regras e preenche todos os cenários comuns.

(1) Referência Rápida de Tags Implícitas

Ponto Chave: A tabela acima é o conjunto completo das regras implícitas oficiais do Emmet. Além dessas regras explícitas, omitir um nome de tag em qualquer outro contexto de pai ainda usa div como padrão. Esta é a regra binária de "implícito contextual vs. div padrão".

(2) Comparação de Cenários Comuns das Regras Implícitas

(3) Combinações Implícito + class + id

Tags implícitas podem ser combinadas livremente com .class, #id e [attr]:

Nota: Tags implícitas só têm efeito quando o nome da tag é omitido na abreviação. Se você escrever explicitamente um nome de tag (ex.: div.item), a regra implícita não se aplica — sempre será <div class="item">. Isso foi enfatizado nas Perguntas Frequentes da Aula 03.

5. Exemplos Práticos

Os 5 exemplos a seguir cobrem os cenários principais de Lorem e tags implícitas — do Lorem básico à contagem de palavras especificada, de múltiplos parágrafos a implícito + class.

▶ Exemplo: Lorem Básico p>lorem (Dificuldade: ★)

Um parágrafo, 30 palavras de Lorem Ipsum — o placeholder mais usado por designers.

Abreviação:

p>lorem

Expansão:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</p>

Saída:

TEXT 📖 Somente leitura

📋 Copy

Explicação: lorem é a palavra-chave para o gerador de texto placeholder do Emmet. A saída padrão é de 30 palavras (separadas por espaço) de Lorem Ipsum. p>lorem coloca lorem dentro de p, resultando em um único parágrafo placeholder de 30 palavras. A contagem real de palavras pode variar ligeiramente por implementação do editor (VSCode/WebStorm usam o mesmo parágrafo base de 30 palavras). Para outros comprimentos, use a sintaxe loremN (ex.: lorem5 = 5 palavras).

▶ Exemplo: Contagem de Palavras Especificada p>lorem5 (Dificuldade: ★)

5 palavras de Lorem — adequado para placeholders de descrição curta (subtítulos de cartão, dicas de botão).

Abreviação:

p>lorem5

Expansão:

<p>Lorem ipsum dolor sit amet.</p>

Saída:

TEXT 📖 Somente leitura

📋 Copy

Explicação: O 5 em lorem5 é o parâmetro de contagem de palavras. O Emmet gera exatamente 5 palavras de Lorem (que são "Lorem ipsum dolor sit amet." — as primeiras 5 palavras do Lorem Ipsum). Este comprimento é adequado para cenários de descrição curta: subtítulos de cartão, dicas de botão, slogans. Para texto mais longo, mas com menos de 30 palavras, use lorem10, lorem20, etc. Não há um limite máximo rígido de palavras (lorem1000 também será expandido), mas gerar quantidades massivas de texto diminuirá a responsividade do editor.

▶ Exemplo: Lorem com Múltiplos Parágrafos (p>lorem)*3 (Dificuldade: ★★)

Três elementos <p>, cada um com 30 palavras independentes de Lorem — placeholder do corpo de um artigo de blog.

Abreviação:

(p>lorem)*3

Expansão (trecho):

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
<p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p>
<p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p>

Saída:

TEXT 📖 Somente leitura

📋 Copy

Explicação: (p>lorem)*3 repete o modelo p>lorem 3 vezes, gerando a cada vez texto Lorem independente de 30 palavras (o lorem do Emmet é um gerador, não texto fixo). Os 3 parágrafos extraem de parágrafos diferentes na biblioteca Lorem Ipsum, portanto o conteúdo não é repetitivo. Isso é equivalente a p*3>lorem — a análise do Emmet de p*3>lorem também repete p 3 vezes, inserindo lorem independente a cada vez. Os parênteses tornam a semântica mais clara: repita todo o modelo de parágrafo 3 vezes dentro do grupo.

▶ Exemplo: Resumo Implícito + class ul>.item*3 + table>(.row>.cell*3)*2 + select>option*3 (Dificuldade: ★★)

Três cenários de tag implícita lado a lado — demonstrando as regras implícitas para elementos pai ul, table e select em um único conjunto de exemplos.

Abreviação (3 expansões independentes):

ul>.item*3

Expansão:

<ul>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

Abreviação:

table>(.row>.cell*3)*2

Expansão:

<table>
  <tr class="row">
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr class="row">
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
</table>

Abreviação:

select>option*3

Expansão:

<select name="" id="">
  <option value=""></option>
  <option value=""></option>
  <option value=""></option>
</select>

Saída:

TEXT 📖 Somente leitura

📋 Copy

Explicação: Três abreviações mostram os três principais campos de batalha das tags implícitas. ul>.item*3: ul é um pai de lista; omitir o nome da tag infere automaticamente li, e 3 elementos li compartilham class="item". table>(.row>.cell*3)*2: no contexto de table, .row é implicitamente tr, .cell é implicitamente td — uma tabela de 2 linhas × 3 colunas sem escrever nenhum tr/td explicitamente. select>option*3: no contexto de select, omitir o nome da tag infere automaticamente option. Nota: select usa name="" e id="" por padrão (predefinições do Emmet), e option usa value="" por padrão — esses são os atributos mínimos para tags HTML5.

▶ Exemplo: Formulário + Implícito form#login>(input[type=text name=user]+input[type=password name=pwd]+button{Login}) (Dificuldade: ★★)

Um formulário de login escrito em uma linha — uma combinação de implícito + class + id + atributos + conteúdo de texto.

Abreviação:

form#login>(input[type=text name=user]+input[type=password name=pwd]+button{Login})

Expansão:

<form id="login" action="">
  <input type="text" name="user">
  <input type="password" name="pwd">
  <button>Login</button>
</form>

Saída:

TEXT 📖 Somente leitura

📋 Copy

Explicação: Este exemplo combina todos os operadores das Fases 1–3 — # (id), > (aninhamento), + (irmão), . (class), [attr] (atributos), {} (conteúdo de texto), () (agrupamento). form#login adiciona id="login" ao form (form usa action="" por padrão); dentro dos parênteses estão 3 elementos irmãos: input[type=text name=user], input[type=password name=pwd], button{Login}. O botão usa padrão sem atributo type (botões HTML5 usam comportamento submit por padrão, embora type explícito seja mais claro). Este é o exemplo abrangente padrão da Fase 3, demonstrando todas as capacidades do Emmet em cenários de formulário.

6. Exemplo Completo: Página de Artigo de Blog + Lorem + Implícito + Numeração

Combine Lorem, tags implícitas, {texto} e numeração $ — um esqueleto completo de "página de artigo de blog" escrito em uma linha.

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

Abreviação:

section.blog>(header>h1{Título do Blog: Emmet Aumenta Velocidade 5x}+p.meta{Por Alice · 2026-07-30})+(article>(p>lorem)*3)+(aside>ul.tag-cloud>(li.tag*5>a{#tag-$}))

Expansão:

<section class="blog">
  <header>
    <h1>Título do Blog: Emmet Aumenta Velocidade 5x</h1>
    <p class="meta">Por Alice · 2026-07-30</p>
  </header>
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
    <p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p>
    <p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p>
  </article>
  <aside>
    <ul class="tag-cloud">
      <li class="tag"><a href="" id="tag-1">#tag-1</a></li>
      <li class="tag"><a href="" id="tag-2">#tag-2</a></li>
      <li class="tag"><a href="" id="tag-3">#tag-3</a></li>
      <li class="tag"><a href="" id="tag-4">#tag-4</a></li>
      <li class="tag"><a href="" id="tag-5">#tag-5</a></li>
    </ul>
  </aside>
</section>

Saída:

TEXT 📖 Somente leitura

📋 Copy

Explicação: Este exemplo é o abrangente completo da Fase 3 — invocando simultaneamente o gerador Lorem, tags implícitas (ul→li), conteúdo de texto {Título do Blog: Emmet Aumenta Velocidade 5x} e numeração $ (tag-1 até tag-5). Os parênteses estão aninhados em 3 níveis de profundidade: o externo (header>...) + (article>...) + (aside>...) torna os três blocos irmãos dentro de section; o interno (p>lorem)*3 dá ao article 3 parágrafos Lorem independentes; o mais interno (li.tag*5>a{#tag-$}) dá a cada li um elemento a cujo id e texto carregam a numeração $. Toda a página de artigo de blog passa de 30+ linhas de HTML escritas à mão para 1 linha de Emmet.

❓ Perguntas Frequentes

P: Qual a diferença entre lorem e lipsum? R: São completamente equivalentes. O Emmet suporta tanto lorem quanto lipsum como palavras-chave para o ponto de entrada do gerador Lorem Ipsum, produzindo o mesmo texto placeholder. Isso é um artefato histórico — lipsum é a abreviação do site lipsum.com, enquanto lorem é o nome padrão da indústria. Os dois são intercambiáveis, sem diferença entre editores ou versões. Recomenda-se usar lorem (é mais curto e mais universal).

P: lorem5 realmente são exatamente 5 palavras? Ou é contagem de caracteres? R: É contagem de palavras (separadas por espaço). lorem5 expande para 5 palavras em inglês: Lorem ipsum dolor sit amet. Se as palavras incluírem pontuação (ex.: Lorem, ipsum.), o Emmet conta por tokens separados por espaço, ainda 5 palavras. A unidade de contagem de palavras não depende do comprimento de caracteres, então a diferença de comprimento visual entre lorem5 e lorem50 é dramática — o primeiro tem cerca de 28 caracteres para 5 palavras, enquanto o último tem cerca de 280 caracteres para 50 palavras.

P: As regras de tag implícita se aplicam apenas a tags HTML padrão? Também podem ser usadas no contexto CSS? R: O contexto HTML possui um conjunto completo de regras de tag implícita (veja a tabela de referência rápida no §4). O contexto CSS usa "inferência inteligente de nome de propriedade" — fz16 é inferido inteligentemente como font-size: 16px e m10 como margin: 10px. O "implícito" do CSS não é "omitir nomes de tag", mas sim "omitir nomes de propriedade, inferindo-os a partir dos valores". Este é o mecanismo central do Emmet em atalhos CSS e será abordado sistematicamente na Fase 4 (Fundamentos de Atalhos CSS).

P: Posso personalizar tags implícitas? Por exemplo, posso fazer .item dentro de nav se tornar implicitamente a? R: Sim, através do snippets.json. O snippets.json do Emmet é um arquivo de configuração de extensão em formato JSON que permite aos usuários substituir expansões de tag padrão (ex.: fazer select usar multiple por padrão) e definir novas abreviações (ex.: vue → <div data-vue>). No entanto, estender regras de tag implícita requer configuração no nível do editor (ex.: configurações Emmet do VSCode), e o caminho de implementação varia por editor. Esta aula apenas introduz o conceito; a Fase 5 (Ações do Editor) abordará brevemente o snippets.json.

P: O exemplo form#login acima expande apenas com action="" e sem method="". Foi omitido acidentalmente? R: Não é uma omissão. O snippets.json oficial do Emmet define a expansão padrão de form como <form action="" method=""></form> (ambos os atributos vazios incluídos). No entanto, editores populares (VSCode, WebStorm) possuem camadas de plugin Emmet que omitem o method="" vazio na saída — porque um method vazio em HTML5 é equivalente a "get" (o padrão), tornando-o redundante. Portanto, o que você vê é o resultado renderizado real, não a saída bruta da especificação Emmet. Se você executar a mesma abreviação em um ambiente puramente de linha de comando (ex.: emmet-cli), obterá a versão completa com method="". Lembre-se desta diferença — ela ajuda a solucionar "por que a mesma abreviação expande de forma diferente em editores diferentes".

📖 Resumo

• lorem gera 30 palavras por padrão; loremN especifica N palavras (ex.: p>lorem5 = 5 palavras de Lorem)
• lorem é um gerador: (p>lorem)*3 expande para 3 parágrafos independentes e pode ser combinado com {texto} + $ em uma linha para uma página inteira
• Tags implícitas trocam automaticamente pelo elemento pai: ul→li, table→tr, tr→td, select→option, dl→dt/dd (pais fora da lista permitida ainda usam div como padrão)
• Regras implícitas só têm efeito quando o nome da tag é omitido; escrever explicitamente um nome de tag sempre tem prioridade
• Implícito + class/id: ul>.item → <li class="item">, table>#row1>.cell → <tr id="row1"><td class="cell">

📝 Exercícios

1. Básico (Dificuldade: ★): Escreva abreviações Emmet de uma linha que expandam para: (a) um parágrafo p>lorem (30 palavras de Lorem); (b) um parágrafo de 8 palavras p>lorem8; (c) um menu suspenso select>option*5 (5 opções, verificando o comportamento implícito).

2. Intermediário (Dificuldade: ★★): Escreva uma "grade de cartões" — uma section contendo 6 cartões, cada um com um título, descrição de 3 palavras e botão. Requisitos: (a) descrição gerada com lorem3; (b) título usando conteúdo de texto {Cartão $} + numeração; (c) botão usando tags implícitas + {Detalhes}. Escreva tudo em uma linha Emmet e explique por que lorem3 e {Cartão $} não interferem um no outro.

3. Desafio (Dificuldade: ★★★): Escreva um esqueleto completo de "Página Inicial de Blog" contendo: (a) um header com um logo + 3 links de navegação (usando nav>ul>li*3>a{Nav $}); (b) um main com 3 cartões de artigo, cada um tendo um título, autor e 3 parágrafos Lorem; (c) um aside com uma nuvem de tags (5 tags, usando ul.tag-cloud>li.tag*5>a{#tag-$}); (d) um footer com direitos autorais {© 2026 web-tutorial.com}. Escreva tudo em uma linha Emmet (usando + para conectar blocos ou parênteses para agrupamento), verifique a expansão e compare a diferença de tempo entre escrever 50+ linhas de HTML manualmente vs. uma linha Emmet.

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