Emmet Toolkit - Seja um Web Developer mais rápido \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 11 Horas 51 Min 53 Seg Tempo restante da oferta: 11 51 53 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Emmet Toolkit - Seja um Web Developer mais rápido [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) # Emmet Toolkit - Seja um Web Developer mais rápido Conheça o Emmet Toolkit, ferramenta presente em praticamente todos os editores de código e IDEs que acelera muito a escrita do seu HTML e CSS. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/emmet-toolkit-seja-um-web-developer-mais-rapido-agora-mesmo.png) Olá Web Developers! Hoje vou falar de uma ferramenta que poucos conhecem, mas que está presente em praticamente TODOS os [editores de código](https://www.treinaweb.com.br/blog/principais-editores-de-codigo-para-desenvolvimento/ "editores de código") e [IDEs](https://www.treinaweb.com.br/blog/o-que-e-uma-ide-ambiente-de-desenvolvimento-integrado/ "IDEs"): o Emmet Toolkit. A ideia principal dele é muito simples: escreva uma expressão parecida com um seletor CSS e ele vai transformar isso em elementos [HTML](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-html-e-css/ "HTML"). Assim você pode escrever bem menos e [ser mais produtivo](https://www.treinaweb.com.br/blog/como-aumentar-sua-produtividade-nos-estudos/ "ser mais produtivo"). E, claro, se você ainda não está acostumado com certos seletores do CSS, vai acabar aprendendo. Semelhantemente também há comandos para acelerar o seu CSS. ![Exemplo de comando do Emmet para geração de HTML](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/emmet-toolkit-html-exemplo.png) ## Geração simples de elementos Se você não conhece o Emmet, é provável que em arquivos HTML já tenha percebido o seguinte: para gerar um elemento basta escrever o nome dele e pressionar `Tab`; ```html div ``` ## Geração de elementos com id, classes e atributos Da mesma forma que geramos um elemento a partir do nome dele, podemos gerar um elemento com id e classes. Basta seguir a mesma lógica de um seletor CSS. ```html a#meuId.classe-a.classe-b[href="https://treinaweb.com.br"] ``` ## Conteúdo de um elemento Para indicar o conteúdo de um elemento, escreva entre `{ }`. ```html span{Olá Web Developers} Olá Web Developers ``` ## Elementos Filhos Por mais que os exemplos acima sejam bacanas, não economizaram tanta digitação assim. Mas daqui para frente as coisas começam a ficar mais legais. Vimos como definir uma tag apenas. E se quisermos já indicar os elementos filhos? Para isso basta usar o `>`, que no CSS indica um elemento filho. ```html ul>li ``` Algo importante a notar é que você não pode colocar espaço na declaração, como `ul > li`. [ ![React - Dominando Componentes Funcionais](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Curso React - Dominando Componentes Funcionais Conhecer o curso ](https://www.treinaweb.com.br/curso/react-dominando-componentes-funcionais) ## Subir um nível Podemos entender que o `>` é para descer um nível dentro do último elemento declarado. Mas, e se quisermos declarar algo que deveria ficar lá em cima, com outro elemento? Podemos usar o `^`. Ele serve para indicar ao Emmet que queremos subir um nível. Imagine que queremos uma lista com um item de lista. Mas que também queremos declarar uma `div` após a lista. Como já declaramos o item de lista, é preciso subir até o nível da lista novamente. Você pode colocar quantos `^` quiser. ```html ul>li>span^^div ``` ## Use o Emmet para gerar Vários Elementos! Sem dúvida até aqui já podemos economizar uma boa quantidade de teclas pressionadas. Mas gerar apenas um filho em um elemento não é grande coisa. Para que possamos gerar vários filhos, basta usar o `*` (que para o Emmet indica uma multiplicação) e indicar o número de elementos que você quer que sejam gerados. ```html ul>li*5 ``` E, claro, você pode juntar com outras coisas que aprendemos até aqui. ```html ul.lista>li.item*5 ``` ## Variáveis dentro de um looping Não apenas podemos gerar vários elementos com `*`, como também podemos utilizar o símbolo `$` como uma “variável” que armazena o número do elemento. ```html ul.lista>li.item-${Produto $}*5 Produto 1 Produto 2 Produto 3 Produto 4 Produto 5 ``` Você também pode usar vários `$` caso queira que os números tenham um zero como prefixo. ```html ul.lista>li.item-${Produto $$$}*5 Produto 001 Produto 002 Produto 003 Produto 004 Produto 005 ``` Para fazer os números virem em ordem decrescente, adicione `@-` após o `$`. ```html ul.lista>li.item-${Produto $$$@-}*5 Produto 005 Produto 004 Produto 003 Produto 002 Produto 001 ``` Ou então, após `@` coloque o número que você quer que seja o primeiro. ```html ul.lista>li.item-${Produto $$$@5}*5 Produto 005 Produto 006 Produto 007 Produto 008 Produto 009 ``` [ ![HTML5 + CSS3 - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-fundamentos) ## Elementos Irmãos Por mais que declarar elementos filhos seja muito útil, seria bom também poder indicar os elementos que estarão no mesmo nível do primeiro elemento declarado. E podemos fazer isso com o operador `+`. Assim teremos elementos gerados no mesmo nível. ```html div+span+div ``` ## Agrupamento de Elementos Você pode usar `( )` para agrupar elementos. Assim fica mais simples para você declarar uma árvore de elementos e depois indicar outros elementos irmãos. Bem mais simples do que ficar usando `^` para subir um nível. ```html div>(header>navigation)+(main>article)+(footer) ``` ## Emmet gera automaticamente Lorem Ipsum Talvez você já tenha visto o texto conhecido como `Lorem Ipsum`. Ele é muito usado para preencher sites que ainda não estão com um texto definido. Ao invés de pesquisar pelo `Lorem Ipsum` para copiar e colar no seu código, o próprio Emmet faz isso para você! ```html div>lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio repellendus laudantium sunt animi dolorum optio odit vel praesentium, atque non repellat a provident quisquam earum officia libero eos quos. Cum! ``` Você também pode indicar um número após o comando `lorem`. Assim você pode controlar o tamanho do texto a ser gerado: ```html lorem5 Lorem ipsum dolor sit amet. lorem10 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, tempora! ``` [ ![Desenvolvedor Front-end Júnior](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Formação Desenvolvedor Front-end Júnior Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-front-end-junior) - [ #Visual Studio ](https://www.treinaweb.com.br/blog/tag/visual-studio) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #HTML ](https://www.treinaweb.com.br/blog/tag/html) - [ #web developer ](https://www.treinaweb.com.br/blog/tag/web-developer) - [ #Visual Studio Code ](https://www.treinaweb.com.br/blog/tag/visual-studio-code) - [ #IDE ](https://www.treinaweb.com.br/blog/tag/ide) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/11/A-importancia-das-metatag-no-HTML-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ A importância das metatags no HTML ](https://www.treinaweb.com.br/blog/a-importancia-das-metatags-no-html) Nesse artigo aprenderemos sobre as metatag no HTML. Vamos aprender como utilizar e o porquê devemos dar bastante atenção para essas tags. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/google-400x280.jpg) [ Bancos de Dados ](https://www.treinaweb.com.br/blog/categoria/bancos-de-dados) 10 anos atrás ## [ Google na .NET Foundation? SQL Server para Linux? Visual Studio para MacOS? Saiba como foi o Connect() ](https://www.treinaweb.com.br/blog/google-na-net-foundation-sql-server-para-linux-visual-studio-para-macos-saiba-como-foi-o-connect) Não conseguiu acompanhar a Connect() 2016 da Microsoft? Não tem problema, aqui no TreinaWeb te trazemos todas as incríveis novidade que foram apresentadas! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/aprenda-como-configurar-o-vs-code-para-debug-de-codigo-php-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 6 anos atrás ## [ Como configurar o VSCode para debug de código PHP ](https://www.treinaweb.com.br/blog/aprenda-como-configurar-o-vs-code-para-debug-de-codigo-php) Aprenda como configurar o Visual Studio Code para trabalhar com debug de código PHP. Veremos como instalar e ativar a extensão Xdebug na prática. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/17150123/desenvolvimento-colaborativo-em-tempo-real-com-live-share-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 7 anos atrás ## [ Desenvolvimento colaborativo em tempo real com Live Share ](https://www.treinaweb.com.br/blog/desenvolvimento-colaborativo-em-tempo-real-com-live-share) Aprenda como trabalhar com a ferramenta Live Share da Microsoft, que permite o desenvolvimento colaborativo em tempo real usando Visual Studio Code ou VS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/07/05112250/SPRING-BOOT-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 7 anos atrás ## [ Criando uma API REST com o Spring Boot ](https://www.treinaweb.com.br/blog/criando-uma-api-rest-com-o-spring-boot) Todos os passos da criação de uma API REST com o framework Spring Boot do Java, no Visual Studio Code. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/10/06103451/cobertura-codigos-testes-automatizados-400x280.jpg) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 9 anos atrás ## [ Analisando a cobertura de testes em aplicações .NET com o OpenCover ](https://www.treinaweb.com.br/blog/analisando-cobertura-de-testes-em-aplicacoes-net-com-o-opencover) Conheça o OpenCover, ferramenta open-source para análise de cobertura de testes. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/06/recursos-de-linha-de-comando-para-o-entity-framework-core-400x280.png) [ .NET Core ](https://www.treinaweb.com.br/blog/categoria/net-core) 10 anos atrás ## [ Recursos de linha de comando para o Entity Framework Core ](https://www.treinaweb.com.br/blog/recursos-de-linha-de-comando-para-o-entity-framework-core) Conheça os recursos de linha de comando para o Entity Framework Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/CONFIGURAÇÃO-AMBIENTE-MACOS-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 6 anos atrás ## [ Configurando ambiente de desenvolvimento Django no macOS ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-django-no-macos) Veja neste artigo como configurar seu ambiente de desenvolvimento macOS para desenvolvimento rest com Django. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/configurando-ambiente-de-desenvolvimento-python-no-linux-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 6 anos atrás ## [ Configurando ambiente de desenvolvimento Django no Linux ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-django-no-linux) Veja neste artigo como configurar seu ambiente de desenvolvimento linux para desenvolvimento rest com Django. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/vs-code-melhores-extensoes-para-front-end-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ VS Code - Melhores extensões para Front End - Parte 2 ](https://www.treinaweb.com.br/blog/vs-code-melhores-extensoes-para-front-end-parte-2) Veja mais uma lista com as melhores extensões disponíveis do VS Code para Front-End e melhore a eficiência dos seus trabalhos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/configurando-ambiente-de-desenvolvimento-python-no-windows-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 6 anos atrás ## [ Configurando ambiente de desenvolvimento Django no Windows ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-django-no-windows) Veja neste artigo como configurar seu ambiente de desenvolvimento Windows para desenvolvimento rest com Django. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/instalacao-do-vs-code-no-windows-linux-e-macos-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ Instalação do VS Code no Windows, Linux e MacOS ](https://www.treinaweb.com.br/blog/instalacao-do-vs-code-no-windows-linux-e-macos) Neste artigo veremos o que é o VS Code e como podemos realizar a sua instalação nos sistemas operacionais Windows, Linux e MacOS. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **11h 51min 53s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58