O que é uma página web

Toda página que você abre começa como um arquivo de texto simples. Clique com o botão direito em quase qualquer página, escolha Exibir código-fonte da página e você poderá ler o HTML que o servidor enviou.

Uma página é um arquivo de texto

Quando você digita um endereço no navegador, ele pede um arquivo a um servidor e recebe de volta texto simples. Esse texto é escrito em HTML, a HyperText Markup Language (linguagem de marcação de hipertexto). O navegador o lê de cima para baixo, descobre quais partes são títulos, parágrafos, links e imagens e então desenha a página que você vê. Dá para conferir isso em quase qualquer site: clique com o botão direito na página e escolha Exibir código-fonte da página. Por trás das cores e do layout há um arquivo de texto longo e legível.

HTML é uma linguagem de marcação, não uma linguagem de programação. Não tem laços nem faz contas. O trabalho dela é rotular o conteúdo: esta linha é o título principal, estas três linhas são uma lista, esta expressão leva a outra página. Duas outras linguagens costumam andar junto. O CSS decide a aparência (cores, fontes, espaçamento, layout), e o JavaScript faz a página reagir a cliques e à digitação. Este curso trata da primeira camada. O curso de CSS trata da segunda.

O esqueleto que toda página tem

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Corner Bakery</title>
  </head>
  <body>
    <h1>Corner Bakery</h1>
    <p>Fresh bread every morning from 7 am.</p>
  </body>
</html>

A primeira linha, <!DOCTYPE html>, é uma herança dos primeiros tempos da web. Hoje a única função dela é dizer ao navegador para usar o modo padrão, e não um antigo modo de compatibilidade que imita os bugs dos navegadores dos anos 1990, então mantenha-a sempre. Em seguida vem o elemento <html>, que envolve o documento inteiro. O atributo lang dele informa o idioma da página. Leitores de tela o usam para escolher a pronúncia certa, e ferramentas de tradução, para saber o que estão traduzindo.

Dentro de <html> há duas partes. O <head> guarda informações sobre a página que não são desenhadas nela. <meta charset="utf-8"> diz qual codificação de caracteres o arquivo usa; o UTF-8 consegue guardar as letras de todos os sistemas de escrita, inclusive o coreano, então o texto não vira símbolos estranhos. O <title> é o nome mostrado na aba do navegador, nos favoritos e nos resultados de busca, e é a primeira coisa que um leitor de tela anuncia quando a página abre. O <body> guarda tudo o que aparece na tela.

Do texto a uma árvore

O navegador não guarda seu HTML como uma longa sequência de caracteres. Ele o analisa e monta uma árvore de objetos chamada DOM, o Document Object Model (modelo de objetos do documento). Cada elemento vira um nó, e os elementos escritos dentro de outro elemento viram filhos dele. Na figura abaixo, title é filho de head, e h1 e p são filhos de body. Os seletores de CSS e o JavaScript trabalham sobre essa árvore, e esse é um dos motivos pelos quais aninhar com cuidado importa.

Os navegadores são tolerantes. Se você esquecer uma tag de fechamento, o analisador segue regras de correção escritas no padrão HTML e monta a árvore mesmo assim, mas a árvore corrigida pode não ser a que você queria. Criar o hábito de escrever a estrutura certa poupa muita depuração confusa depois.

Quem escreve as regras

Tim Berners-Lee escreveu a primeira proposta da World Wide Web em março de 1989, quando trabalhava no CERN, e no fim de 1990 o primeiro servidor web e o primeiro navegador já funcionavam lá. O HTML cresceu muito desde então. Hoje ele é definido pelo HTML Living Standard, mantido pelo WHATWG, um grupo criado pelos fabricantes de navegadores. Em 2019 o W3C e o WHATWG concordaram em trabalhar nessa versão única. Living (vivo) quer dizer que o documento não tem números de versão e é atualizado o tempo todo, então o nome HTML5, que você ainda vai ver em livros, é só um rótulo solto.

O editor abaixo funciona como um navegador em miniatura. Digite à esquerda e o resultado aparece à direita logo depois. Executar redesenha o resultado na hora. Quando achar que terminou, aperte Verificar: a página roda alguns testes no seu HTML e diz quais ainda falham. Recomeçar traz de volta o código inicial.