Criar estrutura semântica
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Markup Instrução para IA
HTML — MDN
Documento, semântica, landmarks, links, botões, formulários, tabelas, mídia, elementos interativos e templates.
Como usar
Anexe o arquivo à conversa com a IA e declare que ele é o contrato técnico da tarefa. Em seguida, forneça contexto, requisito, restrições e critérios de aceite.
Pronto para anexarFluxo recomendado
Como utilizar este .md em um projeto
1. Declare o ambienteBrowser, servidor, build, versão, dispositivos, compatibilidade e dependências.
2. Defina o objetivo do usuárioNão comece por uma classe/API; comece pelo comportamento que precisa existir.
3. Peça seleção de conceitosA IA deve citar as partes do guia aplicáveis e ignorar o restante.
4. ImplementeGere código somente depois da decisão e preserve a arquitetura existente.
5. ValideChecklist, edge cases, acessibilidade, segurança, responsividade/performance conforme o caso.
Aplicações
Quando anexar este guia
Melhorar acessibilidade nativa
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Modelar formulários e conteúdo
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Evitar div/button/link sem semântica correta
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Mapa do arquivo
Principais blocos de conhecimento
1. Contrato de execução para a IA
Seção coberta pelo guia Markdown.
2. Documento e metadados
Seção coberta pelo guia Markdown.
3. Texto e navegação
Seção coberta pelo guia Markdown.
4. Formulários
Seção coberta pelo guia Markdown.
5. Dados e mídia
Seção coberta pelo guia Markdown.
6. Elementos interativos e templates
Seção coberta pelo guia Markdown.
Checklist de aceite
Seção coberta pelo guia Markdown.
Prompt-base para IA
Seção coberta pelo guia Markdown.
Fontes primárias
Seção coberta pelo guia Markdown.
Prompt
Prompt-base para copiar
Use o guia “HTML — MDN” anexado como contrato técnico para esta tarefa. 1. Diagnostique o requisito e o ambiente. 2. Aponte as seções do guia que serão usadas. 3. Escolha a solução mais simples que preserve semântica, acessibilidade, segurança e manutenção. 4. Não invente APIs/classes. 5. Implemente e revise pelo checklist do guia. Contexto: [DESCREVA o sistema, stack, estado atual e cenário da mudança] Objetivo: [DESCREVA o resultado observável que deve existir ao final] Restrições: [DESCREVA o que não pode mudar, compatibilidade, segurança e limites técnicos]
Exemplo preenchido — o que o usuário pode descrever
Use o modelo acima com dados concretos do projeto. O exemplo abaixo mostra o nível de detalhe esperado.
Contexto: Página de cadastro usada com teclado e leitores de tela; o backend depende dos names e ids atuais dos campos. Objetivo: Reestruturar o formulário com semântica correta, labels, fieldsets e mensagens de erro sem mudar o contrato enviado ao servidor. Restrições: Preservar names/ids; links continuam navegação e buttons continuam ações; não depender apenas de placeholder para nomear campos.
ContextoStack, versões, arquitetura, página/módulo afetado, estado atual e comportamento existente.
ObjetivoResultado observável para o usuário ou para o sistema; diga o que deve funcionar ao final.
RestriçõesO que não pode mudar, compatibilidade, segurança, acessibilidade, performance, prazo e limites de escopo.