Texto, títulos e hierarquia de conteúdo

02

Prepare-se — O que você vai construir

• Explicar hierarquia de títulos sem depender de uma receita decorada.
• Relacionar parágrafos e ênfase com a estrutura e o comportamento esperado.
• Aplicar ordem de leitura em um caso real e em um caso extremo.

Se precisar de apoio, consulte a capítulo anterior e volte a estas tarefas. Não há obrigação de seguir um prazo.

03

Entenda — Modelo mental e estrutura

1. Construa o modelo mental antes da regra

Títulos formam um mapa do conteúdo, não uma escala de tamanho de fonte. Parágrafos separam ideias e elementos de ênfase comunicam importância ou mudança de voz sem virar atalhos de aparência. O navegador não recebe uma imagem pronta: ele interpreta o documento, cria estruturas internas e combina regras para chegar ao resultado. Neste capítulo, use hierarquia de títulos como ponto de partida. Relacione essa ideia com parágrafos e ênfase e ordem de leitura; as três decisões precisam colaborar. Uma declaração isolada pode parecer correta e ainda produzir uma experiência frágil quando o conteúdo muda, o texto aumenta ou outra pessoa navega por teclado.

Descreva primeiro o propósito de hierarquia de títulos e a relação que ele mantém com parágrafos e ênfase. Pergunte primeiro qual informação ou relação precisa existir e só então escolha o elemento, seletor ou propriedade. Esse encadeamento evita decorar receitas sem compreender as consequências. Nomeie o comportamento esperado em uma frase curta, implemente a menor versão capaz de demonstrá-lo e mantenha o código-fonte legível. Se uma solução depende de números mágicos ou de uma ordem acidental, registre a dependência e procure uma alternativa guiada pelo conteúdo.

2. Leia o exemplo em camadas

<main>
  <h1>Guia da primeira horta</h1>
  <p>Comece observando luz, espaço e rotina.</p>
  <section>
    <h2>Escolha do local</h2>
    <p><strong>Luz direta</strong> muda as espécies possíveis.</p>
  </section>
</main>

Leia o exemplo de fora para dentro. Identifique a estrutura, depois a regra que controla apresentação e, por fim, o estado que precisa continuar utilizável. O trecho torna hierarquia de títulos explícito e deixa ordem de leitura disponível para evolução sem desmontar a estrutura. Digite o trecho em vez de apenas copiá-lo. Em seguida, troque nomes, quantidade de conteúdo e largura disponível. O objetivo não é preservar a captura de tela do exemplo, mas descobrir quais escolhas continuam corretas quando o cenário deixa de ser ideal.

Observe também o que o código não faz. HTML descreve significado e relações; CSS participa da apresentação e do layout. Quando uma responsabilidade é colocada na camada errada, manutenção e acessibilidade se tornam mais difíceis. Use comentários apenas para explicar uma decisão que o próprio código não consegue tornar óbvia. Comentários que repetem a propriedade ou o nome do elemento acrescentam ruído.

3. Transforme observação em critério

Uma solução forte torna hierarquia de títulos reconhecível no código e verifica parágrafos e ênfase com conteúdo real. Um critério verificável descreve entrada, ação e resultado. Em vez de “ficou bonito”, prefira algo como “o título mantém hierarquia quando o texto dobra” ou “o controle continua visível e operável com Tab”. Verifique o DOM, os estilos calculados e o tamanho real da área disponível. Redimensionar a janela é útil, mas não substitui zoom, teclado, leitor de tela, validação de markup e teste com conteúdo extremo.

A armadilha principal desta etapa é: Escolher h1, h2 ou h3 pelo tamanho padrão e saltar níveis para obter uma aparência desejada.. Corrija a causa antes de empilhar exceções. Desative temporariamente regras, confira qual declaração venceu e reduza o caso até entender o mecanismo. Ao terminar, você deve conseguir explicar por que a solução funciona, quais limites assumiu e como o componente se comporta quando um recurso mais novo não está disponível.

05

Construa — Teste cada decisão no ambiente

Crie uma pasta para o capítulo e preserve uma versão mínima que possa ser aberta diretamente no navegador. Reproduza o exemplo e crie uma segunda versão que aplique ordem de leitura sem perder hierarquia de títulos. Primeiro implemente sem refinamentos visuais. Depois use as ferramentas de desenvolvimento para confirmar estrutura, regras aplicadas e dimensões. Por último, force pelo menos três situações adversas: texto duas vezes maior, largura de 320 CSS pixels e navegação completa por teclado.

Não corrija todos os sintomas de uma vez. Para cada falha, anote a hipótese, a evidência observada e a menor mudança feita. Valide novamente após a correção. Quando houver mais de uma solução possível, escolha pela clareza do contrato, pela adaptação ao conteúdo e pela experiência de quem usa teclado, zoom ou tecnologia assistiva. Guarde uma captura apenas como evidência complementar; o código e os critérios de aceite são a fonte principal da entrega.

06

Pratique — Seis decisões de implementação

Resolva primeiro pelo raciocínio. Consultar o capítulo e testar hipóteses no navegador faz parte do processo; depois, releia as justificativas.

08

Projete — Implemente, compare e refine

Entrega incremental: a estrutura textual de um guia com título principal, três seções, subtópicos e ênfases semanticamente justificadas. Comece descrevendo, em até cinco linhas, quem usará a interface e qual tarefa precisa concluir. Implemente a estrutura e a apresentação em arquivos separados, mantendo nomes coerentes com a função do componente. Inclua um caso de conteúdo real, um caso extremo e o estado de foco. Ao final, escreva uma nota técnica explicando onde aplicou hierarquia de títulos, como conferiu parágrafos e ênfase e qual limite encontrou em ordem de leitura.

<main>
  <h1>Guia da primeira horta</h1>
  <p>Comece observando luz, espaço e rotina.</p>
  <section>
    <h2>Escolha do local</h2>
    <p><strong>Luz direta</strong> muda as espécies possíveis.</p>
  </section>
</main>

Critérios para revisar

• A estrutura comunica hierarquia de títulos, o teste de parágrafos e ênfase foi registrado e ordem de leitura não impede a tarefa principal.
• Preservar ordem, nome acessível e foco visível enquanto hierarquia de títulos é apresentado.
• O código evidencia hierarquia de títulos e parágrafos e ênfase sem depender de números acidentais.
• A nota técnica registra o teste de texto duas vezes maior, largura de 320 CSS pixels e navegação completa por teclado.

09

Retome — Organize sua revisão

• Explique com suas palavras a relação entre hierarquia de títulos e parágrafos e ênfase.
• Reabra o laboratório sem consultar o texto e reconstrua a decisão ligada a ordem de leitura.
• Aplique o teste “Inspecionar hierarquia de títulos, variar parágrafos e ênfase e confirmar o comportamento com ordem de leitura.” ao projeto acumulado e registre uma melhoria.

Feche a explicação, tente lembrar um exemplo e depois confira. Retome uma dificuldade no próximo encontro e alguns dias depois; ajuste o intervalo ao que ainda precisa praticar.

Use exemplos concretos na autoavaliação: “consigo explicar com consulta” ou “quero praticar novamente”. Marcar como lida não representa uma certificação.