Texto básico

Parágrafos, quebras e ênfase formam o miolo das páginas do Belavista: descrições de cartaz, avisos de oficina, créditos fictícios. Texto básico é o chão do HTML.

O exemplo deste capítulo é 07-texto-basico, no pacote que acompanha o volume. Leia → mude uma coisa → preveja → recarregue → confira.

O que você vai aprender

• Usar p para parágrafos.
• Distinguir strong/em de b/i.
• Conhecer br, hr e quando evitá-los.
• Marcar citações curtas e longas.
• Não fingir layout com Enter e espaços no meio do HTML.

Parágrafos

Cada ideia em um p. O navegador cuida das margens. Não use br no fim de cada linha para “simular” parágrafo — isso atrapalha reflow em telas estreitas.

<p>O cartaz usa tipografia condensada e tinta vermelha.</p>
<p>A tiragem fictícia é de oitenta exemplares numerados.</p>

Ênfase e importância

• strong — importância / urgência.
• em — ênfase / tom.
• b e i — destaque tipográfico sem o mesmo peso semântico (use com critério).

Leitores de tela tratam strong e em de forma diferente de negrito visual puro. Prefira semântica quando o significado importa.

Quebra e linha horizontal

br força uma quebra de linha dentro do mesmo bloco — útil em endereço ou verso curto, não em todo texto.

hr marca uma mudança temática (separador). Não é “linha decorativa”: se for só estilo, CSS resolve.

Citações

blockquote para citação em bloco; q para citação curta em linha; cite para o título da obra. No Belavista:

<blockquote>
  <p>O papel também fala.</p>
  <footer>— caderno fictício do ateliê</footer>
</blockquote>

Erro comum: apertar Enter várias vezes no editor esperando “espaço em branco” na página. Espaços múltiplos no HTML colapsam. Use parágrafos e CSS para espaçamento.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Texto básico — Belavista</title>
  </head>
  <body>
    <main>
      <h1>Texto do cartaz</h1>
      <p>O Laboratório Belavista imprime cartazes em Recife. Esta página treina <strong>parágrafos</strong> e <em>ênfase</em>.</p>
      <p>
        Endereço fictício:<br>
        Rua da Aurora, 100<br>
        Recife — PE
      </p>
      <hr>
      <blockquote cite="#">
        <p>Composição limpa, papel honesto.</p>
      </blockquote>
      <p>Leia o manifesto no caderno <cite>Tipos da Aurora</cite> (obra fictícia).</p>
    </main>
  </body>
</html>

Troque um strong por b e compare mentalmente: visual pode ser parecido; o significado muda.

Espaço em branco e pre

Texto normal colapsa espaços. pre preserva formatação (código, poesia monoespaçada). No capítulo de texto em linha você aprofunda code e pre.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Quando usar br em vez de um novo p?
2. Qual a diferença de intenção entre strong e b?
3. Por que vários Enter no HTML não criam “buracos” grandes na página?

Respostas comentadas

1. Quando a quebra faz parte do mesmo bloco (endereço, verso), não quando começa uma ideia nova — aí é outro p.
2. strong marca importância; b marca atenção tipográfica sem o mesmo compromisso semântico.
3. Porque o HTML colapsa sequências de espaço em branco em um só, salvo em contextos como pre.