Web como camadas separadas

Aplicações web combinam três pilares: HTML (estrutura e significado), CSS (apresentação) e JavaScript (comportamento). Misturar responsabilidades — estilo inline em excesso, lógica de negócio no markup — dificulta manutenção em equipe e acessibilidade em produção.

Documento HTML5 mínimo válido

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Relatório — Dev Journal</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav aria-label="Principal">
      <a href="/">Início</a>
    </nav>
  </header>
  <main>
    <article>
      <h1>Indicadores do trimestre</h1>
      <p>Resumo executivo para stakeholders.</p>
    </article>
  </main>
  <script src="app.js" defer></script>
</body>
</html>

Semântica e acessibilidade

  • main — conteúdo principal único por página.
  • nav — blocos de navegação; use aria-label se houver mais de um.
  • article — conteúdo autocontido (post, card de notícia).
  • section — agrupamento temático com heading.
  • Hierarquia de headings sem saltos (h1 → h2 → h3).
Diagrama PlantUML

Formulários acessíveis

<form id="filtro" novalidate>
  <div>
    <label for="busca">Buscar colaborador</label>
    <input id="busca" name="busca" type="search" autocomplete="off" required>
  </div>
  <button type="submit">Aplicar filtro</button>
</form>

label for + id conectam texto ao campo para leitores de tela. Validação HTML5 é complementar; regras de negócio ficam em JavaScript.

CSS: box model e layout

*, *::before, *::after { box-sizing: border-box; }

.layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.25rem;
}

@media (max-width: 768px) {
  .layout { grid-template-columns: 1fr; }
}

Flexbox dentro de Grid

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

Variáveis CSS e consistência

:root {
  --cor-primaria: #2563eb;
  --cor-texto: #1e293b;
  --raio: 8px;
}

.btn-primary {
  background: var(--cor-primaria);
  color: #fff;
  border-radius: var(--raio);
  padding: 0.5rem 1rem;
}

Checklist antes de publicar página estática

  1. Contraste texto/fundo (WCAG AA como referência).
  2. Foco visível em links e botões.
  3. Viewport meta para mobile.
  4. Imagens com alt descritivo.
  5. Teste em largura estreita (375px).

Tipografia e ritmo vertical

Conteúdo legível usa largura de linha limitada (45–75 caracteres), altura de linha ~1.5 e hierarquia clara. Evite cinza claro demais sobre branco — falha comum em dashboards internos.

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--cor-texto);
}

.prose {
  max-width: 65ch;
  margin: 0 auto;
}

.prose h2 { margin-top: 2rem; }
.prose p + p { margin-top: 1rem; }

Imagens responsivas

<img
  src="grafico-800.webp"
  srcset="grafico-400.webp 400w, grafico-800.webp 800w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Gráfico de receita trimestral: Q1 R$ 120k, Q2 R$ 145k"
  loading="lazy"
>

alt descreve informação, não “imagem de gráfico”. loading="lazy" adia download fora da viewport — melhora performance em páginas longas.

Organização de arquivos CSS

Para projetos pequenos, um styles.css basta. Ao crescer, separe: reset/base, layout, componentes, utilitários. Comentários de seção (/* --- Forms --- */) ajudam navegação sem exigir preprocessador.

Erros frequentes de iniciante

  • Usar div para tudo — perde semântica e acessibilidade.
  • Esquecer lang="pt-BR" no html.
  • CSS inline em massa — impossível manter tema consistente.
  • Headings só por tamanho visual (h4 antes de h2).
  • Botões sem texto ou só ícone, sem aria-label.

Exercício: landing de relatório

Construa página estática com header, nav, main com article, sidebar com filtros (apenas HTML/CSS), footer. Use Grid para layout e Flex na toolbar. Valide no validador W3C e teste tabulação completa com teclado — foco deve ser visível em todos os links.

Para aprofundar na web

Para entender melhor este tema, pesquise por:

  • "HTML semântico MDN main nav article" — landmarks e acessibilidade
  • "CSS Grid layout guia completo" — macro layout responsivo
  • "Flexbox alinhamento justify align" — toolbars e barras de ação
  • "WCAG contraste cores verificador" — testar acessibilidade visual
  • "box model CSS border-box" — dimensões previsíveis de componentes

Inspecione um site que admira (F12 → Elements) e identifique três tags semânticas usadas.

Atividades

  1. Por que separar HTML, CSS e JS em arquivos distintos?

    • A) Porque HTML não suporta classes
    • B) Manutenção, reuso e clareza de responsabilidades
    • C) Porque CSS só funciona externo
    • D) Para evitar Git
    Ver resposta

    Resposta correta: B) Manutenção, reuso e clareza de responsabilidades

    Separação de camadas facilita revisão, cache e trabalho paralelo em equipe.

  2. box-sizing: border-box faz com que:

    • A) padding e border entrem no width declarado
    • B) margin desapareça
    • C) grid seja desativado
    • D) fontes fiquem responsivas
    Ver resposta

    Resposta correta: A) padding e border entrem no width declarado

    Dimensões incluem padding e border — layouts previsíveis.

  3. Quando usar Grid vs Flexbox em um dashboard?

    Ver resposta

    Grid para macro layout (sidebar + header + painéis); Flex para alinhar itens dentro de cada painel (toolbar, botões).