HTML: Parágrafos HTML
Parágrafos são a forma mais básica de organizar texto em uma página web. Dominar as tags de texto comuns torna o conteúdo mais legível.
1. A Tag de Parágrafo <p>
A tag <p> (paragraph) é usada para definir um parágrafo. O navegador adiciona automaticamente um espaçamento (margin) antes e depois dos parágrafos, criando uma separação natural entre eles.
Múltiplos elementos <p> organizados em sequência formam a estrutura do corpo de um artigo. Essa é a forma mais comum de organizar texto na web — artigos de notícias, posts de blog, descrições de produtos e muito mais são construídos a partir de parágrafos.
▶ Exemplo
<p>Este é o primeiro parágrafo. O navegador adiciona automaticamente espaçamento antes e depois dos parágrafos.</p>
<p>Este é o segundo parágrafo, logo após o primeiro. Os parágrafos na página se separam naturalmente, criando um ritmo de leitura claro.</p>
<p>Este é o terceiro parágrafo. Múltiplos parágrafos organizados em sequência formam um artigo completo.</p>
<p> é um elemento block-level que ocupa a largura inteira da linha. Mesmo que você coloque dois elementos <p> na mesma linha no seu HTML, o navegador os renderizará como dois blocos independentes.
2. Quebra de Linha e Linha Horizontal
Além da tag de parágrafo, o HTML oferece duas tags vazias relacionadas ao layout de texto: <br> e <hr>.
(1) A Tag de Quebra de Linha <br>
<br> (break) representa uma quebra de linha forçada no texto. É ideal para endereços, poesias, letras de música e outros cenários onde você precisa controlar manualmente a posição das quebras. Atenção: <br> não serve para criar espaçamento entre parágrafos — o espaçamento de parágrafos deve ser controlado com <p> ou CSS.
(2) A Linha Horizontal <hr>
<hr> (horizontal rule) desenha uma linha horizontal na página, geralmente indicando uma mudança de tema ou separador de seção. Assim como <br>, <hr> também é uma tag vazia.
▶ Exemplo
<p>Esta é uma linha de texto,<br>e esta é o texto após a quebra de linha no mesmo parágrafo.</p>
<hr>
<p>Acima do divisor está a primeira metade, abaixo está a segunda metade.</p>
<p>Exemplo de endereço:<br>
Rua Principal, 123<br>
Sala 12<br>
CEP: 01001-000</p>
<br> para criar espaçamento entre parágrafos. Se você quer um espaçamento maior entre eles, use a propriedade margin do CSS em vez de empilhar várias tags <br>.
3. Entidades de Caracteres HTML
No HTML, certos caracteres têm significados especiais (por exemplo, < e > são usados para tags). Se você quiser exibir esses caracteres tal como são na página, precisará usar entidades de caracteres (também chamadas de entidades HTML).
Princípio fundamental: Quando o navegador encontra <, ele o trata como o início de uma tag. Para exibi-lo como um sinal de "menor que", você deve escrever <. Da mesma forma, o próprio símbolo & precisa ser escapado, pois é o prefixo das referências de entidade.
Os 5 caracteres de escape mais usados:
| Caractere | Código | Descrição |
|---|---|---|
|
|
Espaço sem quebra |
< |
< |
Menor que |
> |
> |
Maior que |
& |
& |
E comercial |
" |
" |
Aspas duplas |
❓ Perguntas Frequentes
<p> e <br>? Quando uso cada um?<p> é uma tag de parágrafo que cria um bloco de texto independente — o navegador adiciona espaçamento automaticamente antes e depois. <br> é uma tag de quebra de linha que força uma nova linha dentro do mesmo parágrafo, sem criar um novo parágrafo. Simplesmente: <p> para "começar um novo parágrafo", <br> para "quebrar linha dentro do mesmo parágrafo". Um erro comum é usar múltiplos <br> para criar espaçamento entre parágrafos — isso é errado; use múltiplas tags <p> em vez disso.<br> para criar espaçamento?<br> para espaçamento é um hábito antigo de design web — absolutamente não recomendado. Três razões：1）Errado semanticamente — <br> significa "quebra de linha", não "espaçamento", como usar a tecla Enter em vez de separar parágrafos; 2）Difícil de manter — para ajustar o espaçamento, precisaria deletar ou adicionar múltiplos <br>, enquanto margin do CSS precisa apenas de uma mudança de valor; 3）Problemas responsivos — múltiplos <br> criam espaçamento inconsistente em diferentes tamanhos de tela. Abordagem correta：use tags <p> para parágrafos, margin do CSS para controle de espaçamento. e um espaço regular no HTML? (espaço sem quebra) tem duas funções：1）Não colapsa — múltiplos exibem múltiplos espaços; 2）Impede que o navegador quebre linhas nesse ponto. Usos comuns：entre números e unidades (como 100 px), entre nomes (como João Silva).📖 Resumo
<p>define um parágrafo; é um elemento block-level e o navegador adiciona espaçamento automaticamente antes e depois<br>força uma quebra de linha,<hr>desenha uma linha horizontal — ambas são tags vazias- Entidades de caracteres são usadas para exibir caracteres especiais:
<(menor que),>(maior que),&(e comercial), - Não abuse de
<br>para criar espaçamento entre parágrafos — usemargindo CSS
📝 Exercícios
- Prática de Layout de Texto: Use as tags
<p>,<br>e<hr>para escrever um texto curto contendo: três parágrafos, um endereço (usando<br>para quebras de linha) e uma linha divisória. - Prática de Entidades de Caracteres: Exiba o seguinte conteúdo em uma página: "O HTML usa a tag
<p>para definir parágrafos, e o símbolo & precisa ser escapado com &." (Dica: Você precisa aninhar corretamente as entidades de caracteres para que o navegador exiba a própria entidade, e não o caractere que ela representa.)
