Página HTML: marcação, estilo e programa

As três camadas

Pense numa casa. O HTML é a estrutura: paredes, portas, janelas. O CSS é a pintura e a decoração. O JavaScript é a parte elétrica: faz as coisas se mexerem.

HTML é uma linguagem de marcação. Cada trecho recebe um nome: título, parágrafo, lista, link. A lista de tags de Tim Berners-Lee, de 1992, já era assim. "HTML5" é só um nome de marketing, e não existe um "HTML6" para esperar.

CSS cuida de cor, tamanho e fonte. Uma regra tem um seletor, uma propriedade e um valor: h1 { color: #2D4A7C; } deixa todo título dessa cor. Quando o navegador, a pessoa que lê e o autor discordam, a "cascata" decide quem vence.

Por padrão, o CSS bloqueia a pintura da página até estar pronto, para ninguém ver a página "pelada" por um instante.

JavaScript é o programa. Foi criado por Brendan Eich em 1995, e hoje roda em 98,9% dos sites, segundo o W3Techs.

Funcionar em todo navegador

Os três motores da aula 4 seguem o mesmo padrão, mas implementam em ritmos diferentes. Por isso existe o Interop, um projeto anual das empresas que fazem navegadores, com testes e um painel público. "Está certo no Chrome" não quer dizer "está certo". Quem monta páginas testa nos três.

Medir em vez de achar

O Google publica três medidas de experiência, as Web Vitals. O PageSpeed Insights mede as três, de graça, em qualquer endereço público.

Acessibilidade: o atributo alt

A norma WCAG 2.2 exige texto alternativo para toda imagem que carrega informação. A Lei Brasileira de Inclusão (artigo 63) torna a acessibilidade obrigatória em sites de empresas com sede ou representação no País. Em fevereiro de 2026, o WebAIM achou imagens sem texto alternativo em 53,1% de um milhão de páginas iniciais. Escreva o que a imagem mostra: "Logotipo da padaria: um pão sobre fundo azul".

Seu primeiro arquivo

Copie num editor de texto simples, salve como meusite.html e abra no navegador.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Minha primeira página</title>
</head>
<body>
  <h1>Minha primeira página</h1>
  <p>Escrita à mão e aberta no navegador.</p>
</body>
</html>

• lang="pt-BR": o leitor de tela usa a voz certa.
• charset="utf-8": evita "página" virar "página".
• viewport: o celular usa a largura real da tela.