Emmet: Projeto 1

Q: P: Posso usar texto não-inglês em atalhos Emmet?

R: Sim, com limitações. Conteúdo de texto (dentro de {texto}) pode conter quaisquer caracteres — incluindo português, emoji, espaços. Mas valores de atributo (dentro de [attr=val]) com espaços devem ser envolvidos em aspas (ex.: [placeholder="Digite seu nome de usuário"]). Evite usar caracteres não-inglês em id/class — seletores CSS têm baixa compatibilidade com id/class não-inglês (versões antigas do IE não suportam); fortemente recomendado usar inglês para id/class.

Q: P: Nomes de atributo longos como placeholder precisam ser escritos completos?

R: O Emmet não suporta atalhos de nome de atributo — [placeholder=...] deve ser escrito completo. Mas valores de atributo podem omitir aspas quando não há espaços: [type=text] é equivalente a [type="text"]. Para valores de atributo com espaços como [placeholder=Digite seu nome de usuário], aspas são obrigatórias: [placeholder="Digite seu nome de usuário"], caso contrário o analisador do Emmet gerará erro.

Q: P: Para onde o formulário envia?

R: No exemplo desta aula, action="/login" significa enviar para o endpoint /login do backend. No desenvolvimento real, action é tipicamente uma rota backend (ex.: Express app.post('/login', ...), Django path('login/', views.login)). Esta aula foca na parte HTML; o tratamento backend não é abordado. Se você precisar de um mock puramente frontend, use action="javascript:void(0)" no e adicione JS para escutar o evento submit.

Q: P: Por que o formulário de login precisa do atributo required ?

R: required é um atributo de "validação obrigatória" HTML5 — o navegador verifica nativamente se o campo está vazio e, se vazio, bloqueia o envio e mostra "Preencha este campo". No exemplo desta aula, ambos os campos Nome de Usuário e Senha têm required; o link Esqueceu a Senha não precisa (não é um campo de formulário). Este é o atributo chave para "validação frontend sem JS" — fortemente recomendado para todos os campos obrigatórios. Fácil de esquecer ao codificar à mão; zero chance de esquecer ao usar atalhos Emmet, já que é um componente estrutural da abreviação.

Nas aulas 1–16 você aprendeu as 8 principais categorias de sintaxe do Emmet, 3 Ações principais e 5 ações de aceleração de edição — mas todas como exemplos isolados de "fragmentos". Esta aula é o primeiro projeto prático abrangente: escrever o HTML completo de uma página de login de 70 linhas com uma única linha de atalho Emmet. Alice escreve o formulário inteiro em 10 segundos — 10x mais rápido que codificar à mão.

1. O Que Você Vai Aprender

Decomposição de requisitos: Dividir uma "página de login" em 5 seções (cabeçalho / formulário / botões / links / login social) e mapear cada seção para um fragmento de atalho Emmet
Composição de aninhamento: Usar > filho + + irmão + () agrupamento + * multiplicação para encadear seções em um esqueleto completo
Encadeamento de classe/ID: Usar .class1.class2 encadeamento de múltiplas classes para expressar estilos de botão (.btn.btn-primary)
Atributos personalizados: Usar [attr=val] para adicionar type / name / placeholder / required / for ao <input>, e href ao <a>
Preenchimento de texto: Usar {texto} para escrever textos como "Bem-vindo de Volta", "Nome de Usuário", "Senha", "Entrar", "ou", "Esqueceu a Senha?", "Não tem uma conta?", "Cadastre-se Agora"

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

(1) Ponto de Dor: 3 Campos + 2 Botões + 3 Links + Título — 10 Minutos à Mão

Alice é desenvolvedora front-end em uma plataforma SaaS. Em julho de 2026, o gerente de produto envia um aviso urgente: adicione uma página de login ao painel administrativo esta semana, entrando em produção na próxima segunda-feira. O design do Figma mostra 5 seções:

Seção	Lista de Elementos
1. Cabeçalho da marca	`<span>` mostrando o nome do produto "CLOUDFLOW"
2. Área do título	`<h1>` Bem-vindo de Volta + `<p>` subtítulo
3. Formulário	Nome de Usuário / Senha 2 campos + labels + caixa de seleção + link esqueceu a senha
4. Botão de envio	Botão primário "Entrar" + botões secundários de login social "Google" / "GitHub"
5. Solicitação de cadastro	Link inferior "Não tem uma conta? Cadastre-se Agora"

Total: 1 <span>, 1 <h1>, 1 <p>, 2 <input>, 2 <label>, 1 <button>, 1 <a> para esqueceu a senha, 2 <button> para login social, 1 <a> para cadastro = 11 elementos de formulário + 1 span da marca. HTML escrito à mão:

HTML

<span class="brand-name">CLOUDFLOW</span>
<h1 class="title">Bem-vindo de Volta</h1>
<p class="subtitle">Continue com sua conta</p>
<form id="loginForm" action="/login" method="post">
  <div class="field">
    <label for="user">Nome de Usuário</label>
    <input id="user" class="input" type="text" name="user" placeholder="Digite seu nome de usuário" required>
  </div>
  <div class="field">
    <label for="pwd">Senha</label>
    <input id="pwd" class="input" type="password" name="pwd" placeholder="Digite sua senha" required>
  </div>
  <div class="field-row">
    <label class="checkbox">
      <input type="checkbox" name="remember"> Lembrar-me
    </label>
    <a class="help" href="/forgot">Esqueceu a Senha?</a>
  </div>
  <button type="submit" class="btn btn-primary">Entrar</button>
</form>
<div class="divider"><span>ou</span></div>
<div class="social">
  <button class="social-btn" type="button">Google</button>
  <button class="social-btn" type="button">GitHub</button>
</div>
<p class="footer">Não tem uma conta? <a href="/signup">Cadastre-se Agora</a></p>

Um total de 32 linhas de HTML escrito à mão, mais todos os detalhes de atributos (id / class / type / name / placeholder / required / for / action / method). Alice estima que levará 8–10 minutos — e é fácil perder atributos (como esquecer required, o que quebra a validação do formulário).

(2) A Solução de Uma Linha com Emmet

Alice abre o VSCode, pressiona ! para expandir o esqueleto HTML, depois navega para <body> e digita uma única linha de atalho:

HTML

div.login-container>div.login-card>(.brand>span.brand-name{CLOUDFLOW})+h1.title{Bem-vindo de Volta}+p.subtitle{Continue com sua conta}+form#loginForm[action=/login method=post]>(.field>label[for=user]{Nome de Usuário}+input#user.input[type=text name=user placeholder="Digite seu nome de usuário" required])+(.field>label[for=pwd]{Senha}+input#pwd.input[type=password name=pwd placeholder="Digite sua senha" required])+(.field-row>(label.checkbox>input[type=checkbox name=remember]{Lembrar-me})+a.help[href="/forgot"]{Esqueceu a Senha?})+button[type=submit].btn.btn-primary{Entrar}+.divider{ou}+.social>(button.social-btn{Google})+(button.social-btn{GitHub})+p.footer{Não tem uma conta?}+a[href="/signup"]{Cadastre-se Agora}

Pressione Tab e 32 linhas de HTML aparecem de uma vez. Alice gastou apenas 10 segundos — 48–60x mais rápido que codificar à mão. Mais importante: zero atributos faltantes (required / placeholder / for estão todos incluídos), zero erros de digitação.

(3) Benefícios

Alice completou o "Projeto 1" em 10 segundos para o formulário — 48–60x mais rápido que codificar à mão — com zero atributos faltantes e zero erros de digitação. O maior benefício não é a velocidade, mas eliminar 80% dos bugs de "atributo faltante" — é fácil esquecer required ou for ao codificar à mão, mas nos atalhos Emmet esses detalhes são "componentes" integrais da abreviação e não podem ser perdidos. O QA passa na primeira tentativa antes do lançamento da próxima segunda-feira, zero regressões.

A tabela abaixo mapeia todas as 5 seções para operadores Emmet específicos — esta é a etapa crítica de "decomposição de requisitos".

Seção	Elemento	Atalho Emmet	Sintaxe Abordada (Aula)
1. Cabeçalho da marca	`<span class="brand-name">CLOUDFLOW</span>`	`span.brand-name{CLOUDFLOW}`	Aula 03 tags implícitas + Aula 09 texto
2. Área do título	`<h1 class="title">` + `<p class="subtitle">`	`h1.title{...}+p.subtitle{...}`	Aula 04 irmãos + Aula 03 classe + Aula 09 texto
3. Formulário	`<form id="loginForm" action="..." method="...">` aninhando múltiplos `<div class="field">`	`form#loginForm[action=/login method=post]>(.field>...)`	Aula 04 filho + Aula 07 id + Aula 08 atributos personalizados + Aula 06 agrupamento + tags implícitas
4. Botão de envio	`<button type="submit" class="btn btn-primary">Entrar</button>`	`button[type=submit].btn.btn-primary{Entrar}`	Aula 08 atributos personalizados + Aula 07 múltiplas classes + Aula 09 texto
5. Login social	`<div class="social">` com 2 `<button>` dentro	`.social>(button.social-btn{Google})+(button.social-btn{GitHub})`	Aula 06 agrupamento + Aula 05 multiplicação (também pode usar `*2`) + tags implícitas

📌 Ponto Chave: Esta tabela é o "método principal da prática prática do Emmet" — primeiro decomponha a página em seções, depois decomponha seções em elementos, finalmente traduza elementos em atalhos Emmet. Esta cadeia mental de 3 etapas é a chave para ir de "iniciante em Emmet" a "especialista em Emmet".

4. O Atalho Emmet Tudo-em-Um (Principal)

Os 3 exemplos a seguir constroem da menor unidade ao formulário completo — demonstrando o processo de pensamento "de uma vez".

(1) ▶ Exemplo: Bloco de Título `h1.title{Bem-vindo de Volta}` (Dificuldade: ★)

A menor unidade: um único <h1> com classe e texto.

Abreviação:

HTML

h1.title{Bem-vindo de Volta}

Expansão:

HTML

<h1 class="title">Bem-vindo de Volta</h1>

Saída: Renderiza como um cabeçalho <h1>; class="title" pode ser alvo de seletores CSS (ex.: .title { font-size: 28px; }).
TEXT 📖 Somente leitura
Explicação: `h1` é o nome do elemento (HTML Aula 03), `.title` é a classe (Aula 07), `{Bem-vindo de Volta}` é o conteúdo de texto (Aula 09). Três pontos de sintaxe combinados — esta é a "unidade completa mínima" do Emmet.

(2) ▶ Exemplo: Par de Campo de Formulário `label[for=user]{Nome de Usuário}+input#user.input[type=text name=user placeholder="Digite seu nome de usuário" required]` (Dificuldade: ★★)

Um campo de formulário: <label> + <input>, com associação for/id + múltiplos atributos.

Abreviação:

HTML

label[for=user]{Nome de Usuário}+input#user.input[type=text name=user placeholder="Digite seu nome de usuário" required]

Expansão:

HTML

<label for="user">Nome de Usuário</label>
<input id="user" class="input" type="text" name="user" placeholder="Digite seu nome de usuário" required>

Saída: Renderiza como 1 <label> + 1 <input>; <label for="user"> é associado ao <input> via id="user" (clicar no label foca o campo). O <input> carrega 6 atributos: id / class / type / name / placeholder / required.
TEXT 📖 Somente leitura
Explicação: A "densidade de informação" do atalho excede em muito a digitação manual —
- 3 pontos de sintaxe: `#user` (id), `.input` (classe), `[type=text]` (atributo)
- 5 pares chave-valor de atributo: `type=text` / `name=user` / `placeholder="Digite seu nome de usuário"` / `required` (atributo booleano, sem valor)
- 1 texto: `{Nome de Usuário}`
Total: 9 atributos de elemento HTML, o atalho tem apenas 95 caracteres — digitar os mesmos atributos à mão seria 200+ caracteres.

Formulário completo: 1 <form> + 2 <div class="field"> (cada um com label+input) + 1 <div class="field-row"> (com caixa de seleção+link) + 1 <button>.

Abreviação:

HTML

form#loginForm[action=/login method=post]>(.field>label[for=user]{Nome de Usuário}+input#user.input[type=text name=user placeholder="Digite seu nome de usuário" required])+(.field>label[for=pwd]{Senha}+input#pwd.input[type=password name=pwd placeholder="Digite sua senha" required])+(.field-row>(label.checkbox>input[type=checkbox name=remember]{Lembrar-me})+a.help[href="/forgot"]{Esqueceu a Senha?})+button[type=submit].btn.btn-primary{Entrar}

Expansão:

HTML

<form id="loginForm" action="/login" method="post">
  <div class="field">
    <label for="user">Nome de Usuário</label>
    <input id="user" class="input" type="text" name="user" placeholder="Digite seu nome de usuário" required>
  </div>
  <div class="field">
    <label for="pwd">Senha</label>
    <input id="pwd" class="input" type="password" name="pwd" placeholder="Digite sua senha" required>
  </div>
  <div class="field-row">
    <label class="checkbox"><input type="checkbox" name="remember">Lembrar-me</label>
    <a class="help" href="/forgot">Esqueceu a Senha?</a>
  </div>
  <button type="submit" class="btn btn-primary">Entrar</button>
</form>

Saída: Renderiza como um formulário de login completo com 2 campos de entrada (Nome de Usuário / Senha) + 1 caixa de seleção (Lembrar-me) + 1 link esqueceu a senha + 1 botão Entrar.

TEXT 📖 Somente leitura

Explicação: Este atalho reúne toda a sintaxe principal das aulas 1–16 —
- `form#loginForm`: nome do elemento + id (Aulas 03 + 07)
- `[action=/login method=post]`: 2 atributos personalizados (Aula 08)
- `>(...)`: aninhamento filho + agrupamento (Aulas 04 + 06)
- `.field` / `.field-row`: tag `div` implícita (Aula 03)
- `label[for=user]{Nome de Usuário}`: elemento + atributo personalizado + texto (Aulas 08 + 09)
- `input#user.input[type=text ...]`: id + múltiplas classes + múltiplos atributos (Aulas 07 + 08)
- `+`: nó irmão (Aula 04)
- `button[type=submit].btn.btn-primary{Entrar}`: múltiplos atributos + múltiplas classes + texto (Aulas 07 + 08 + 09)
Total: 14 tags HTML, 35+ atributos — digitação manual 200+ caracteres, atalho 270 caracteres expandindo para 14 tags com todos os atributos.

5. Detalhamento do Atalho: O Significado Sintático de Cada Símbolo

O atalho do "formulário completo" da seção anterior tem 270 caracteres — parece intimidante à primeira vista. Vamos dividi-lo em 5 segmentos e explicar cada símbolo:

Segmento	Fragmento do Atalho	Pontos de Sintaxe	Significado
1	`form#loginForm[action=/login method=post]`	Elemento + id + atributos personalizados (Aulas 03+07+08)	`<form id="loginForm" action="/login" method="post">`
2	`>(...)`	Filho + agrupamento (Aulas 04+06)	Entrar dentro do form, envolvido como um grupo
3	`(.field>label[for=user]{Nome de Usuário}+input#user.input[type=text name=user placeholder="Digite seu nome de usuário" required])`	div implícito + filho + elemento + atributo + id + classe + texto (Aulas 03+04+07+08+09)	1 grupo `.field`: contendo label + input
4	`+(.field>label[for=pwd]{Senha}+input#pwd.input[type=password name=pwd placeholder="Digite sua senha" required])`	Nó irmão + repetição da estrutura do segmento 3	2º `.field` (campo de senha), irmão do segmento 3
5	`+(.field-row>(label.checkbox>input[type=checkbox name=remember]{Lembrar-me})+a.help[href="/forgot"]{Esqueceu a Senha?})+button[type=submit].btn.btn-primary{Entrar}`	Nó irmão + agrupamento de múltiplas camadas + botão de múltiplos atributos	Caixa de seleção + esqueceu a senha + botão Entrar

📌 Ponto Chave: O segmento 5 é o mais complexo — .field-row aninha 2 irmãos (label.checkbox + a.help), depois + um button[type=submit]. Agrupamento de múltiplas camadas + aninhamento de irmãos é o núcleo do Emmet avançado — uma vez dominado, você pode escrever "1 linha = 20 linhas de HTML".

Incorpore o atalho principal acima em uma página HTML completa (incluindo <!DOCTYPE> / <head> / <style> / envoltório <body> + estilos CSS completos) para obter uma página de login completa de 70 linhas. Este exemplo é o núcleo desta aula — sem botão "Experimente" (conforme especificação v2.5 gate #26, exemplos abrangentes não são pré-visualizados no editor).

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Painel Administrativo - Entrar</title>
  <meta name="description" content="Página de login do painel administrativo SaaS">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: system-ui, -apple-system, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
    .login-container { width: 100%; max-width: 420px; }
    .login-card { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); }
    .brand { text-align: center; margin-bottom: 24px; }
    .brand-name { font-size: 18px; font-weight: 700; color: #2c3e50; letter-spacing: 1px; }
    .title { font-size: 28px; color: #2c3e50; text-align: center; margin-bottom: 8px; font-weight: 700; }
    .subtitle { color: #7f8c8d; text-align: center; margin-bottom: 32px; font-size: 14px; }
    .field { margin-bottom: 20px; }
    label { display: block; color: #34495e; margin-bottom: 8px; font-size: 14px; font-weight: 500; }
    .input { width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; transition: border-color 0.2s; }
    .input:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15); }
    .field-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font-size: 14px; }
    .checkbox { display: flex; align-items: center; gap: 8px; color: #7f8c8d; cursor: pointer; }
    .checkbox input { margin: 0; cursor: pointer; }
    .help { color: #3498db; text-decoration: none; }
    .help:hover { text-decoration: underline; }
    .btn { width: 100%; padding: 14px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
    .btn-primary { background: #3498db; color: #fff; }
    .btn-primary:hover { background: #2980b9; }
    .divider { display: flex; align-items: center; margin: 24px 0; color: #95a5a6; font-size: 13px; }
    .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #ddd; }
    .divider span { padding: 0 16px; }
    .social { display: flex; gap: 12px; }
    .social-btn { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 8px; background: #fff; cursor: pointer; font-size: 14px; }
    .social-btn:hover { background: #f8f9fa; }
    .footer { text-align: center; margin-top: 24px; color: #7f8c8d; font-size: 14px; }
    .footer a { color: #3498db; text-decoration: none; font-weight: 500; }
  </style>
</head>
<body>
  <main class="login-container">
    <div class="login-card">
      <div class="brand">
        <span class="brand-name">CLOUDFLOW</span>
      </div>
      <h1 class="title">Bem-vindo de Volta</h1>
      <p class="subtitle">Continue com sua conta</p>
      <form id="loginForm" action="/login" method="post">
        <div class="field">
          <label for="user">Nome de Usuário</label>
          <input id="user" class="input" type="text" name="user" placeholder="Digite seu nome de usuário" required>
        </div>
        <div class="field">
          <label for="pwd">Senha</label>
          <input id="pwd" class="input" type="password" name="pwd" placeholder="Digite sua senha" required>
        </div>
        <div class="field-row">
          <label class="checkbox">
            <input type="checkbox" name="remember"> Lembrar-me
          </label>
          <a class="help" href="/forgot">Esqueceu a Senha?</a>
        </div>
        <button type="submit" class="btn btn-primary">Entrar</button>
      </form>
      <div class="divider"><span>ou</span></div>
      <div class="social">
        <button class="social-btn" type="button">Google</button>
        <button class="social-btn" type="button">GitHub</button>
      </div>
      <p class="footer">Não tem uma conta? <a href="/signup">Cadastre-se Agora</a></p>
    </div>
  </main>
</body>
</html>

Saída: O navegador renderiza uma página de login administrativa SaaS completa — fundo com gradiente roxo, cartão branco centralizado, nome da marca "CLOUDFLOW", título Bem-vindo de Volta, formulário de Nome de Usuário/Senha (com associação de label e validação required), caixa de seleção Lembrar-me, link Esqueceu a Senha, botão azul Entrar, divisor "ou", login social Google/GitHub, solicitação de cadastro inferior. Todos os estilos estão inline em <style>, zero dependências externas, zero bibliotecas de terceiros.
TEXT 📖 Somente leitura
Explicação: As 70 linhas de HTML desta aula reúnem toda a sintaxe de atalho HTML das aulas 1–16 —
- O bloco `<style>` (25 linhas de CSS) é escrito à mão ou usando atalhos CSS (aulas 11–13); esta aula foca na parte HTML
- As 32 linhas de HTML dentro de `<body>` de `<main class="login-container">` até `</main>` são geradas por uma única expansão de atalho Emmet
- Comparação de contagem de linhas: escrever 32 linhas de HTML à mão leva 8 minutos; atalho Emmet de 270 caracteres + expansão Tab leva 10 segundos. **Melhoria de velocidade de 48x, taxa de atributos faltantes cai de 20% para 0%**

🌐 Experimente Você Mesmo: Digite o atalho principal desta aula form#loginForm[action=/login method=post]>(.field>label[for=user]{Nome de Usuário}+input#user.input[type=text name=user placeholder="Digite seu nome de usuário" required])+(.field>label[for=pwd]{Senha}+input#pwd.input[type=password name=pwd placeholder="Digite sua senha" required])+button[type=submit].btn.btn-primary{Entrar} na Demonstração ao Vivo do Emmet, pressione Tab e veja a expansão em tempo real.

❓ Perguntas Frequentes

P: Posso usar texto não-inglês em atalhos Emmet? R: Sim, com limitações. Conteúdo de texto (dentro de {texto}) pode conter quaisquer caracteres — incluindo português, emoji, espaços. Mas valores de atributo (dentro de [attr=val]) com espaços devem ser envolvidos em aspas (ex.: [placeholder="Digite seu nome de usuário"]). Evite usar caracteres não-inglês em id/class — seletores CSS têm baixa compatibilidade com id/class não-inglês (versões antigas do IE não suportam); fortemente recomendado usar inglês para id/class.

P: Nomes de atributo longos como placeholder precisam ser escritos completos? R: O Emmet não suporta atalhos de nome de atributo — [placeholder=...] deve ser escrito completo. Mas valores de atributo podem omitir aspas quando não há espaços: [type=text] é equivalente a [type="text"]. Para valores de atributo com espaços como [placeholder=Digite seu nome de usuário], aspas são obrigatórias: [placeholder="Digite seu nome de usuário"], caso contrário o analisador do Emmet gerará erro.

P: Para onde o formulário envia? R: No exemplo desta aula, action="/login" significa enviar para o endpoint /login do backend. No desenvolvimento real, action é tipicamente uma rota backend (ex.: Express app.post('/login', ...), Django path('login/', views.login)). Esta aula foca na parte HTML; o tratamento backend não é abordado. Se você precisar de um mock puramente frontend, use action="javascript:void(0)" no <form> e adicione JS para escutar o evento submit.

P: Por que o formulário de login precisa do atributo required? R: required é um atributo de "validação obrigatória" HTML5 — o navegador verifica nativamente se o campo está vazio e, se vazio, bloqueia o envio e mostra "Preencha este campo". No exemplo desta aula, ambos os campos Nome de Usuário e Senha têm required; o link Esqueceu a Senha não precisa (não é um campo de formulário). Este é o atributo chave para "validação frontend sem JS" — fortemente recomendado para todos os campos obrigatórios. Fácil de esquecer ao codificar à mão; zero chance de esquecer ao usar atalhos Emmet, já que é um componente estrutural da abreviação.

📖 Resumo

Cadeia mental de 5 etapas: Decompor requisitos em seções → seções em elementos → traduzir elementos para Emmet → encadear em página completa → adicionar envoltório head/style
Atalhos principais: .field / .field-row / .btn.btn-primary / form#id[action=... method=...] / [type=text name=... placeholder="..." required]
Evitar atributos faltantes: Atalhos Emmet são "estruturais" — codificar à mão facilmente perde required / for / placeholder, mas atalhos nunca perdem
Encadeamento de múltiplas classes: .btn.btn-primary → class="btn btn-primary" (estilo seletor CSS)
Aspas em valores de atributo: Omitir aspas quando sem espaços (ex.: [type=text]); usar aspas quando há espaços (ex.: [placeholder="Digite seu nome de usuário"])
Núcleo desta aula: Combinar a "sintaxe de fragmentos" das aulas 1–16 em "prática de uma vez" — o salto crítico de "ler atalhos" para "escrever uma linha"

📝 Exercícios

Básico (Dificuldade: ★): Escreva um esqueleto simples de página de login em uma linha de atalho Emmet — inclua 1 <h1 class="title">Login do Usuário</h1>, 1 campo Nome de Usuário <input> (com id="email", type="email", name="email", required), 1 campo Senha <input> (com id="pwd", type="password", name="pwd", required), 1 <button type="submit">Entrar</button>. Após a expansão, verifique: (a) os atributos type do <input> estão corretos; (b) <button type="submit"> dentro de um form aciona o envio do formulário; (c) ambos os atributos required estão em vigor (o navegador bloqueia o envio quando os campos estão vazios).
Intermediário (Dificuldade: ★★): Reescreva o atalho Emmet para o exemplo completo de 70 linhas desta aula — não precisa corresponder exatamente ao da Alice, mas deve ser funcionalmente equivalente: pelo menos 1 form, 2 inputs, 1 caixa de seleção, 1 link esqueceu a senha, 1 botão Entrar, 1 link de cadastro. Adicione 2 botões de login social (Google, GitHub). Compare seu atalho com o atalho da Alice para ver qual é mais conciso (menos caracteres). Faça capturas de tela do seu atalho e do HTML expandido.
Desafio (Dificuldade: ★★★): Estenda a página de login de 70 linhas desta aula em uma página de cadastro completa. Além dos campos da página de login, adicione: número de telefone (type="tel"), email (type="email"), código de verificação (type="text" + um botão "Obter Código" à direita) e uma caixa de seleção de termos de serviço (deve estar marcada). Requisitos: (a) Página HTML completa de uma vez (um único atalho Emmet para a parte do body); (b) contagem de caracteres do atalho ≤ 400 (se exceder, considere usar multiplicação * ou simplificar a estrutura); (c) todos os inputs têm required; (d) a caixa de seleção de termos deve estar marcada para enviar (use <input type="checkbox" required> para validação nativa do navegador). Finalmente, contabilize a diferença de contagem de caracteres e tempo entre codificar à mão vs. Emmet, e escreva um relatório de "Benefícios da Prática 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

Emmet: Projeto 1

1. O Que Você Vai Aprender

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

(1) Ponto de Dor: 3 Campos + 2 Botões + 3 Links + Título — 10 Minutos à Mão

(2) A Solução de Uma Linha com Emmet

(3) Benefícios

3. Lista de Elementos da Página de Login: Mapeando 5 Seções para Operadores Emmet

4. O Atalho Emmet Tudo-em-Um (Principal)

(1) ▶ Exemplo: Bloco de Título h1.title{Bem-vindo de Volta} (Dificuldade: ★)

(2) ▶ Exemplo: Par de Campo de Formulário label[for=user]{Nome de Usuário}+input#user.input[type=text name=user placeholder="Digite seu nome de usuário" required] (Dificuldade: ★★)

(3) ▶ Exemplo: Formulário de Login Completo (Atalho de Uma Linha Principal) (Dificuldade: ★★)

5. Detalhamento do Atalho: O Significado Sintático de Cada Símbolo

6. Exemplo Completo: Página de Login de Uma Vez — 70 Linhas

❓ Perguntas Frequentes

📖 Resumo

📝 Exercícios

(1) ▶ Exemplo: Bloco de Título `h1.title{Bem-vindo de Volta}` (Dificuldade: ★)

(2) ▶ Exemplo: Par de Campo de Formulário `label[for=user]{Nome de Usuário}+input#user.input[type=text name=user placeholder="Digite seu nome de usuário" required]` (Dificuldade: ★★)