Indentação e marcar uma página

Este capítulo alinha o olho com a árvore HTML e transforma o texto do capítulo 08 em página. A Oficina Costeira, coletivo fictício de design em João Pessoa, ganha marcação completa. O exemplo correspondente é 10-indentacao-e-marcacao, no pacote que acompanha o volume.

Este volume tem 52 capítulos. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Indentar filhos com 2 espaços.
• Não indentar irmãos como se fossem netos.
• Preferir espaços, não tab misturado.
• Partir do conteúdo escrito, não do visual.
• Montar uma página com skip-link, header, nav, main, footer.
• Conferir a árvore no editor e na janela.

A indentação é para gente

O navegador ignora a quantidade de espaços entre tags. Você não. Indentação mostra pai e filho. Ajuda a achar tag sem fechar. Mostra cuidado.

Neste volume: 2 espaços por nível. Ligue guias de indentação no VS Code ou no Cursor. Soft tabs: a tecla Tab insere espaços.

<body>
  <header>
    <nav>
      <ul>
        <li><a href="index.html">Início</a></li>
      </ul>
    </nav>
  </header>
</body>

Cada nível desce dois espaços. O fechamento volta à coluna da abertura.

O que não precisa de linha nova

Item de menu curto pode ficar numa linha: li e a juntos. Elemento de frase dentro de parágrafo não ganha linha só para “ficar bonito”.

<p>Coletivo fictício de design em <strong>João Pessoa</strong>.</p>

strong permanece no fluxo do texto. Indentar essa palavra como bloco mente sobre a árvore.

Erro comum:

<article>
  <h2>Farol da Restinga</h2>
    <p>Festival fictício de fotografia.</p>
</article>

O p é irmão do h2, não filho do h2. Os dois na mesma coluna, um nível dentro de article.

Espaços, tabs e caracteres invisíveis

Não misture tab e espaço no mesmo arquivo. Espaço dá largura igual em qualquer editor. Tab muda de largura conforme a configuração da outra pessoa.

Ligue “render whitespace”. Ponto é espaço. Seta é tab. Ache o misto e normalize para 2 espaços.

Linha em branco entre header, main e footer ajuda o olho. Não é obrigatória. Comentário <!-- fim do menu --> ajuda em vários div seguidos. Prefira tags semânticas para não precisar de comentário em cada fechamento.

Ordem útil de atributos: class, id, href ou src, alt. O que você busca mais fica à esquerda.

Marcar a partir do conteúdo

Não comece pelo CSS. Pegue o texto da Oficina:

1. Título da página.
2. Menu de cinco itens.
3. Parágrafo de definição.
4. Lista de projetos ou de pessoas.
5. Rodapé fictício.

Depois escolha a tag: h1 uma vez, ul para o menu, article para um projeto que se sustenta sozinho.

Copie o esqueleto. Mude só o h1 para o nome da página Equipe. Preveja a aba e o título visível. Recarregue. Confira.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Equipe — Oficina Costeira</title>
  </head>
  <body>
    <a class="skip" href="#conteudo">Pular para o conteúdo</a>
    <header>
      <p><a href="index.html">Oficina Costeira</a></p>
      <nav aria-label="Principal">
        <ul>
          <li><a href="index.html">Início</a></li>
          <li><a href="projetos.html">Projetos</a></li>
          <li><a href="equipe.html" aria-current="page">Equipe</a></li>
          <li><a href="agenda.html">Agenda</a></li>
          <li><a href="contato.html">Contato</a></li>
        </ul>
      </nav>
    </header>
    <main id="conteudo">
      <h1>Equipe</h1>
      <ul>
        <li>Lina Vasconcelos — direção de arte (personagem fictícia).</li>
        <li>Rui Pedrosa — conteúdo e acessibilidade (personagem fictício).</li>
        <li>Nara Queiroz — desenvolvimento de páginas (personagem fictícia).</li>
      </ul>
    </main>
    <footer>
      <p>Oficina Costeira — João Pessoa. Conteúdo fictício. Nada é enviado a um servidor.</p>
    </footer>
  </body>
</html>

Conferir a árvore, não o “desenho”

No editor, a coluna do </main> deve igualar a do <main>. Se um </div> sobrar, a indentação denuncia.

No navegador, o inspetor mostra a mesma árvore. Se o visual “parece certo” com div no lugar de h1, a marcação ainda está errada. Semântica não é palpite de CSS.

Arquivo no disco: espaços e tags. Página no navegador: regiões. Teste em 127.0.0.1: Tab no skip-link. Publicação pública não entra.

Erro comum: autoformatar com 4 espaços num arquivo que o volume pede 2. Configure “Tab Size: 2” e “Insert Spaces” no editor da pasta.

Página Projetos, mesmo método

Texto primeiro:

• Farol da Restinga — identidade para festival de fotografia.
• Guia da Lagoa — páginas de um guia impresso na Web.
• Ateliê da Pedra — cartaz e site de exposição temporária.

Cada um vira article com h2. O h1 da página é “Projetos”. O menu aponta projetos.html com aria-current="page".

Não invente pasta ainda se o exemplo guarda tudo em arquivos na raiz. Caminhos relativos curtos: index.html, equipe.html.

O exemplo deste capítulo é 10-indentacao-e-marcacao, no pacote que acompanha o volume. Desloque um li quatro espaços extra. A página não muda. O código mente. Corrija a coluna. A previsão agora é só legibilidade no disco.

Fechar na ordem inversa

O último a abrir é o primeiro a fechar. nav abre, ul abre, li fecha, ul fecha, nav fecha.

Valide o HTML colando no validador. Erro de aninhamento costuma ser indentação ignorada: um a envolvendo um p inteiro, ou ul direto no header sem nav quando o bloco é navegação principal — neste volume o menu principal vai em nav.

Treino: pegue o parágrafo da home em um único linha longa. Quebre-o em tags indentadas sem mudar o texto visível. Preveja: a janela igual. Recarregue. Confira. O ganho está no disco, para a próxima edição.

No editor, “Format Document” só depois de configurar 2 espaços. Senão o formatador empurra 4 e o diff do Git vira um tapete.

Feche um nav demais de propósito. Valide. Preveja erro de aninhamento. Corrija uma tag. Recarregue. A janela pode já ter “corrigido” sozinha; o validador não perdoa. Confie no validador e na indentação, não no milagre do navegador.

Comentário HTML <!-- menu principal --> acima do nav ajuda o futuro você. Não comente cada li. Indentação já mostra os itens.

Dois espaços. Sempre. O volume inteiro usa essa regra.

Atividades

1. Por que o p não se indenta extra só porque veio depois do h2 no mesmo article?
2. Quantos espaços este volume usa por nível?
3. O skip-link aponta para qual id no exemplo de Equipe acima?
4. No exemplo da pasta, alinhe um arquivo “torta” de propósito e depois corrija. O que o navegador mudou e o que o editor mostrou?

Respostas comentadas

1. Porque h2 e p são irmãos, filhos do article. Indentação extra finge que o parágrafo está dentro do título.
2. Dois espaços. Soft tabs. Sem misturar com tab.
3. conteudo, no main. O href é #conteudo.
4. Em geral o navegador não muda: espaço entre tags não é CSS. O editor passa a mostrar pai e filho de novo. A conferência é no disco e no inspetor, não no “layout”.

Referências

• Sintaxe básica de HTML
• Estrutura do corpo: header, nav, main, footer
• Elemento article
• Ferramentas de desenvolvedor

O arquivo completo

Referência do exemplo 10-indentacao-e-marcacao, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}