Estrutura do documento

Toda página do Laboratório Belavista começa igual por baixo: declaração do tipo, raiz html, head invisível e body visível. Sem essa espinha, o navegador improvisa — e a improvisação não é didática.

O exemplo deste capítulo é 02-estrutura-do-documento, no pacote que acompanha o volume. Leia → mude uma coisa → preveja → recarregue → confira.

O que você vai aprender

• Escrever o esqueleto mínimo de um documento HTML.
• Usar lang="pt-BR", charset e viewport.
• Separar o que vai no head do que vai no body.
• Entender por que o title importa para aba e acessibilidade.
• Servir o exemplo só em 127.0.0.1.

DOCTYPE e raiz

A primeira linha é <!DOCTYPE html>. Ela diz ao navegador: isto é HTML moderno, não um modo antigo de compatibilidade.

Em seguida vem <html lang="pt-BR">. O atributo lang informa o idioma do documento. Leitores de tela e ferramentas de tradução usam isso. No Belavista, o idioma é português do Brasil.

O head: invisível e obrigatório

O head não desenha texto na página. Ele guarda metadados: título da aba, charset, viewport, links para CSS, scripts, ícones.

Dois meta entram em quase toda página:

• charset="utf-8" — acentos e símbolos corretos.
• viewport — a página se comporta bem em tela estreita.

O title aparece na aba do navegador, nos favoritos e em resultados de busca. Escreva um título curto e específico: Oficina de cartaz — Belavista, não só Home.

O body: o que a pessoa vê

Tudo que a visitante lê e clica fica no body. Títulos, parágrafos, imagens, formulários. No capítulo 02 o corpo ainda é mínimo: um cabeçalho e um parágrafo de boas-vindas do ateliê.

O navegador pode inventar body se você esquecer a tag. Mesmo assim, escreva-o. Código explícito é mais fácil de estudar e de corrigir.

Ordem que importa

Charset cedo no head evita texto quebrado. Viewport cedo ajuda o layout em celular. title logo depois. CSS e scripts entram quando o volume pedir — nesta etapa o foco é a estrutura.

Erro comum: colocar texto “visível” dentro do head, ou esquecer o </head> e deixar o título “vazar” para o corpo. Confira a árvore no inspetor do navegador.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laboratório Belavista — estrutura</title>
  </head>
  <body>
    <header>
      <h1>Laboratório Belavista</h1>
      <p>Ateliê de tipografia e cartaz · Recife</p>
    </header>
    <main>
      <p>Este documento tem DOCTYPE, idioma, charset, viewport, título e um corpo mínimo.</p>
      <p>Mude o <code>title</code> e confira a aba. Não publique dados reais.</p>
    </main>
  </body>
</html>

Critério para avançar

Você avança se: o arquivo abre sem caracteres estranhos; a aba mostra o título; lang="pt-BR" está na raiz; você sabe apontar o que é head e o que é body.

Atividades

1. Por que lang="pt-BR" fica no elemento html e não no body?
2. O que o viewport evita em celular?
3. Cite duas informações que ficam no head e uma que fica no body.

Respostas comentadas

1. Porque o idioma vale para o documento inteiro (metadados e conteúdo). Declarar na raiz cobre tudo.
2. Evita que a página seja tratada como “desktop encolhido”. Com width=device-width e initial-scale=1, a largura acompanha a tela.
3. Exemplos de head: title, meta charset, meta viewport. Exemplos de body: h1, p, header, main.