Fundação HTML5
Domine a espinha dorsal de qualquer aplicação. Entenda as engrenagens semânticas, a renderização progressiva do DOM e as regras restritas do padrão de formulários.
Estruturação Semântica
O HTML5 trouxe tags semânticas (header, nav, main, section, article, footer) que têm significado para os browsers e leitores de tela. No padrão corporativo, usar <div> para tudo é uma má prática. O uso correto das tags melhora o SEO, garante o fluxo natural de leitura (flow content) e facilita a manutenção do código por outras equipes.
Formulários e Validações
Entradas de dados são críticas. Use sempre rótulos (labels) linkados pelos IDs, e conheça os tipos modernos de input (email, tel, url, date, number). No ecossistema NTL, os formulários HTML trabalham em simetria de validação com o Vue (via v-model/Zod) antes mesmo dos dados fluírem para a Business layer via POST.
Acessibilidade (a11y)
A integridade do DOM não é puramente visual. Para interfaces cegas e automatizadas, os atributos "aria-*" informam estados como botões expandidos, inputs com erros e regiões live. Garantir contraste dinâmico, tamanhos de fontes em rem, e navegação limpa por [TAB] é exigência em projetos maduros.
Análise de Fluxo de Mídia
Em telas avançadas, imagens carregadas de forma pesada bloqueiam as threads. Use atributos como "loading=lazy" nas tags <img> offscreen e especifique largura/altura explicitamente para o navegador reservar o espaço correto, prevenindo as temidas Cumulative Layout Shifts (CLS).
Checklist do Frontend
- Todos os IDs devem ser estritamente únicos na página inteira.
- Sempre utilize atributos 'alt' ou 'aria-label' descritivos.
- Jamais aninhe âncoras (<a>) ou botões dentro de botões.
- A hierarquia de tags H1 a H6 deve ser perfeitamente linear e sem pulos.