Monte uma página pequena

Um site completo de uma página para a padaria do bairro cabe em umas 50 linhas de HTML, e todos os elementos dele vêm das nove unidades anteriores.

Planeje antes de digitar

Antes de escrever qualquer HTML, anote o que a página precisa dizer, em palavras simples e em ordem. Para uma pequena padaria, isso pode ser: o nome, um pequeno menu de links, o que sai do forno hoje, o horário de funcionamento, uma foto do pão, um jeito de se inscrever para receber novidades e o endereço. Cada item sugere um elemento: o nome é um <h1> num <header>, os links vão num <nav>, o horário é uma tabela, a lista de pães é um <ul>, a inscrição é um formulário e o endereço vai no <footer>. Planejar o conteúdo primeiro é o que as equipes profissionais também fazem; o HTML vem a partir dele.

A estrutura pronta

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Corner Bakery</title>
</head>
<body>
  <header>
    <h1>Corner Bakery</h1>
    <nav>
      <ul>
        <li><a href="#today">Today</a></li>
        <li><a href="#hours">Hours</a></li>
        <li><a href="#news">News</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="today">
      <h2>Baked today</h2>
      <ul>...</ul>
    </section>
    <section id="hours">
      <h2>Opening hours</h2>
      <table>...</table>
    </section>
    <section id="news">
      <h2>Get our news</h2>
      <form>...</form>
    </section>
  </main>
  <footer>
    <p>12 Mill Street, Springfield</p>
  </footer>
</body>
</html>

Duas linhas no head são novidade. <meta name="viewport" content="width=device-width, initial-scale=1"> diz aos celulares para usarem a largura real da tela em vez de fingirem ser uma tela de computador e encolherem a página; o curso de CSS explica isso na unidade de design responsivo. O menu é uma lista de links dentro de <nav>, que os leitores de tela anunciam como navegação, lista, 3 itens. Cada link do menu aponta para o id de uma seção, então a página funciona como um único documento rolável.

Revise como um avaliador

Com a página escrita, percorra-a como faria um avaliador cuidadoso. Leia só os títulos: eles contam a história da página? Aperte Tab a partir do topo: dá para alcançar todos os links e campos do formulário, numa ordem coerente, e dá para ver onde está o foco? Olhe cada imagem: o texto alternativo diz o que se perderia sem ela, ou está vazio porque a imagem é decoração? Clique em cada label: ele põe o foco no seu campo? Por fim, cole a página no W3C Markup Validation Service, em validator.w3.org, que lista erros como elementos não fechados ou ids repetidos.

A página vai parecer simples: texto preto no branco, links azuis, as fontes padrão do navegador. Tudo bem, e isso até ajuda. Uma página com bom HTML já é legível em qualquer aparelho, funciona com teclado e com leitor de tela e pode ser impressa. O curso de CSS parte exatamente desse tipo de página e acrescenta cor, espaçamento e layout por cima, sem mudar uma linha do HTML.

Monte em passos pequenos

Escreva a página em passos pequenos e olhe o resultado depois de cada um: primeiro o esqueleto, depois o cabeçalho e o menu, depois uma seção de cada vez. Se algo parecer errado, você só tem algumas linhas novas para conferir. No seu computador, salve o arquivo como index.html e abra-o com um clique duplo; o navegador o mostra direto do disco. Para publicá-lo, você envia o mesmo arquivo para um serviço de hospedagem, e o servidor o manda para quem pedir o endereço, do mesmo jeito que começou a primeira unidade.