Readme
Convenções de HTML seguindo os mesmos princípios do resto do guia: escolher o elemento que descreve o papel do conteúdo, dar nomes que revelam propósito e tratar acessibilidade como parte da marcação desde a primeira linha.
→ Referência rápida: elementos semânticos, atributos e checklist
Setup
| Tópico | Conceitos |
|---|---|
| Base do projeto | Template inicial, ordem do <head>, charset e viewport |
| JavaScript sem framework | type="module", seleção, delegação de evento e fetch |
| jQuery | Legado 3.7.1 e 4.0.0: seleção, delegação, encadeamento e AJAX |
Fundamentos
| Tópico | Conceitos |
|---|---|
| Estrutura do documento | Elementos semânticos, regiões da página e hierarquia de títulos |
| Nomes em HTML | id, classe, data-* e kebab-case semântico |
| Formatação | Indentação, ordem dos atributos e aspas duplas |
| Densidade visual | Respiro entre blocos, atributos longos e aninhamento |
| Referência rápida | Elementos semânticos, atributos e checklist |
Avançados
| Tópico | Conceitos |
|---|---|
| Acessibilidade | alt, ARIA, foco, papéis e a escolha entre botão e link |
| Formulários | <label>, <fieldset>, tipos de input e validação nativa |
| Performance | defer, async, carregamento tardio, preload e preconnect |
| SEO | <title>, meta description, Open Graph, canonical e JSON-LD |
Princípios
Estrutura: semântica e hierarquia
| Princípio | Descrição |
|---|---|
| Elemento semântico no lugar de div | O elemento certo já carrega o significado, sem classe extra |
| Hierarquia de títulos | h1 → h2 → h3, sem pular nível |
| Nomes que revelam propósito | O id e a classe descrevem o papel do elemento na tela |
data-* para comportamento | O JavaScript lê o data-*, e a classe fica só com o estilo |
Acessibilidade: legível por todos
| Princípio | Descrição |
|---|---|
| alt em toda imagem | Descritivo quando a imagem informa, vazio quando ela só decora |
| Label associado ao campo | Todo input tem <label> própria, e o placeholder some ao digitar |
| Botão para ação, link para navegação | <button> executa, <a> leva a outro endereço |
| lang no html | O lang correto dá ao leitor de tela a pronúncia do idioma |
Performance e SEO: produção
| Princípio | Descrição |
|---|---|
| defer nos scripts | Script com defer no <head>, sem travar a leitura da página |
| Carregamento tardio de imagem | Imagem abaixo da dobra com loading="lazy" |
| Title e description próprios | Cada página com o próprio <title> e a própria descrição |
DoDocs v3.7.0 · Desenvolvido por @thiagocajadev · Baseado no trabalho de pmndrs/docs · Poimandres.