Como escrever código HTML mais rápido

Sep 10, 2025

Como

(Crédito da imagem: futuro)

Sites modernos requerem muito código HTML. Layouts complexos com várias diferentes visões e estados podem ser difíceis de criar com apenas um editor de texto simples. Felizmente, há uma série de ferramentas de geração HTML lá fora para trabalhar. Aqui nós tomamos uma rápida olhada em duas das ferramentas mais populares, Emmet e Pug.

No entanto, você ainda precisa saber o seu HTML para usar essas duas ferramentas poderosas de poupança de tempo. Então, antes de mergulhar, certifique-se de que você esteja usando o popular semântico Tags HTML. o caminho certo. Veja também nosso guia para usar um Boilerplate HTML. .

Quer desviar o código? Tente esse construtores de site . Ou por ajuda extra ao longo do caminho, escolha um hospedagem na web. serviço com suporte técnico.

Gerar html na mosca

Ao escrever grandes quantidades de HTML de uma só vez, escrevendo cada etiqueta com a mão pode se tornar muito tediosa, muito rapidamente. Por exemplo, ao escrever uma lista de links, precisamos ter certeza de que o & lt; ul & gt ;, & lt; li & gt; e & lt; a & gt; Tags todos abertos e fecham no lugar certo. Caso contrário, os links podem não funcionar e todo o layout da página irá completamente Haywire.

Como usar o Emmet

Para garantir que você reduza as chances de isso acontecer, você pode empregar os talentos de Emmet. . Esta é uma ferramenta que economizará muita digitação e irá melhorar muito seu HTML & amp; Fluxo de trabalho CSS. Emmet permite criar elementos digitando um seletor de CSS. Em seguida, ele analisará e expandirá esse elemento em HTML regular. Abaixo está o elemento original criado no Emmet.

nav>ul>li*3>a.chapter{Chapter $ of 3}

O Emmet detectará esse elemento, analisá-lo e depois transformará o elemento em HTML padrão, conforme mostrado abaixo. Uma rápida olhada no elemento Emmet sugere que & lt; li & gt; é multiplicado por ( * 3. ) e cada. & lt; li & gt; exemplo será chamado capítulo seguido pelo número apropriado (até 3).

Observe quantos caracteres o elemento Emmet contém e quantos HTML padrão contém. Mesmo este pequeno trecho de código demonstra quanto tempo pode ser salvo usando a taquigrafia emmet.

 & lt; nav & gt;
  & lt; ul & gt;
    & lt; li & gt; & lt; a href = "" class = "capítulo" & gt; capítulo 1
 de 3 & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; a href = "" class = "capítulo" & gt; capítulo 2
 de 3 & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; e lt; a href = "" class = "capítulo" & gt; capítulo 3
 de 3 & lt; / a & gt; & lt; / li & gt;
  & lt; / ul & gt;
& lt; / NAV & GT;

Emmet também está ciente do contexto. Por exemplo, se estamos editando um & lt; tabela & gt; É provável que possamos querer alguns & lt; tr & gt; (Estas são linhas) elementos para preenchê-lo. Tudo o que precisaríamos fazer é especificar quantos precisamos.

Este é apenas um exemplo rápido do que o Emmet pode fazer, mas há muitas opções de configuração disponíveis. Estes incluem a criação de classe de edição de CSS, Bem (Block Element Modifier) e há até mesmo um gerador de Lorem Ipsum.

Também vale a pena notar que a maioria dos editores de código possui Emmet incorporado ou suportá-lo através de plugins. Você pode descobrir mais sobre isso no Documentação Emmet. página.

Use Pug para conteúdo dinâmico

Enquanto o Emmet é ideal para conteúdo estático, o que acontece se o conteúdo precisa ser mais dinâmico? Por exemplo, podemos precisar gerar homepages personalizados, tabelas complexas de pedidos ou repetir blocos comuns de HTML. Isso tudo é possível em JavaScript, mas por pré-prestando este conteúdo, podemos obter um impulso de velocidade adicional sem confiar no navegador do usuário. Lembre-se se você tem uma página pesada de mídia, você vai querer apoiá-lo com confiança armazenamento na núvem .

Passo para frente Pug. Esta é uma ferramenta de modelagem para HTML. Você pode escrever páginas no formato ".pug" e Pug lerá esse arquivo, injetará alguns dados dinâmicos e retornará HTML padrão. O exemplo abaixo é como você escreveria o código no Pug para criar o mesmo HTML como o exemplo do Emmet (acima).

 ul
  Cada Val em [1, 2, 3]
    li.
      um capítulo (href = ", classe =" capítulo ")
# {val} de 3

Um arquivo PUG usa apenas o recuo para indicar o aninhamento.Ele pode iterar os valores para gerar grandes quantidades de HTML em um passe.Esses arquivos ".pug" são projetados para serem reutilizados muitas vezes em um projeto.

Pug está disponível para instalação do Gerenciador de Pacotes npm. .Mas, se você quiser mais informações sobre como começar com Pug pagar uma visita ao local na rede Internet .

Este conteúdo apareceu originalmente na revista Web Designer.

Consulte Mais informação:

10 melhores Frameworks CSS.
Animação CSS. exemplos para recriar
8 tags HTML que você precisa estar usando (e 5 para evitar)

Como escrever código HTML mais rápido

Gerar html na mosca

Como usar o Emmet

Use Pug para conteúdo dinâmico

Como - Artigos mais populares

Como desenhar um cão

Obtenha mais de Artrage 6: Dicas Top para aumentar seu fluxo de trabalho

Adicionar suporte a multi-linguagem a angular

Criar uma paisagem 3D em 6 etapas simples

4 Dicas essenciais de otimização de imagem

Pinte uma cena clássica do conto de fadas com procriate

Os segredos de cumprir um design criativo

Como combinar mapas de deslocamento esculpido e pintado

Categorias