Conteúdo em HTML: títulos, parágrafos e listas

Uma página bem estruturada continua compreensível antes de receber CSS. Nesta aula, você vai transformar um bloco solto de texto em conteúdo com títulos, parágrafos e listas que indicam a relação entre as partes.

Pense num livro de receitas. O nome da receita aparece como título principal; “Ingredientes” e “Modo de preparo” abrem seções; frases explicam detalhes; itens agrupam ingredientes e passos. No HTML, essa organização recebe o nome técnico de hierarquia do conteúdo. A comparação ajuda a enxergar níveis, mas não significa que todo h2 precisa parecer visualmente igual: aparência será tarefa do CSS. O HTML registra o papel daquela informação.

Use títulos para formar um mapa

Os elementos h1 até h6 representam seis níveis de títulos. Em uma página simples, use um h1 para o assunto principal e h2 para seções diretamente ligadas a ele. Um h3 abre uma subseção dentro de um h2.

<main>
  <h1>Guia da horta na varanda</h1>
  <p>Um plano para começar com pouco espaço.</p>

  <h2>Escolha das plantas</h2>
  <p>Comece com espécies que recebem bem a luz disponível.</p>

  <h3>Para quatro horas de sol</h3>
  <p>Salsinha, cebolinha e algumas folhas são boas candidatas.</p>

  <h2>Rotina de cuidado</h2>
  <p>Observe a umidade antes de decidir regar.</p>
</main>

Não escolha h4 porque ele parece menor. Pular de h1 direto para h4 esconde a relação lógica. Se quiser outro tamanho, você ajustará com CSS. Leia apenas os títulos do exemplo: eles já funcionam como um sumário curto do documento.

Parágrafo não é espaçador

O elemento p reúne uma ideia em forma de parágrafo. Quando uma nova ideia começa, feche o primeiro e abra outro. Não use vários <br> para empurrar o conteúdo para baixo. br representa uma quebra de linha dentro do mesmo conteúdo, útil em um endereço ou poema; espaço visual pertence ao CSS.

Essa distinção é parecida com organizar uma conversa em mensagens. Uma nova mensagem pode trazer uma nova ideia; apertar Enter repetidamente dentro da mesma mensagem só cria linhas vazias. Tecnicamente, separar parágrafos cria elementos independentes que o navegador e leitores de tela conseguem percorrer.

Liste quando os itens pertencem ao mesmo grupo

Uma lista não ordenada usa ul; cada item usa li. Ela serve quando a ordem não altera o sentido, como tecnologias que você quer estudar:

<h2>Tecnologias da página</h2>
<ul>
  <li>HTML para a estrutura</li>
  <li>CSS para a aparência</li>
  <li>JavaScript para o comportamento</li>
</ul>

Uma lista ordenada usa ol quando a sequência importa, como instalar, criar e executar. Se você trocar os passos, o resultado pode mudar. O número visível é consequência desse significado, não o único motivo para escolher ol.

No laboratório, adicione um li e execute novamente. O script conta os itens reais, então a frase precisa mudar de três para quatro etapas. Essa pequena prova mostra uma vantagem da estrutura: outros recursos conseguem encontrar e usar o conteúdo quando os elementos representam corretamente cada parte.

Como microprática, troque a lista de tecnologias por uma receita com três passos. Se a ordem alterar o resultado, mude ul para ol. O conteúdo decide o elemento; o marcador visual apenas confirma essa decisão no navegador.

Antes de seguir, esconda mentalmente todo estilo. Você ainda consegue dizer qual é o assunto, quais são as seções e onde existe uma sequência? Se sim, a marcação cumpriu seu trabalho. Na próxima aula, vamos conectar esse conteúdo a outros endereços e incluir imagens sem abandonar quem não consegue vê-las.