HTML: guia sobre parágrafos

Elementos de parágrafo em HTML são usados ​​para postar texto em páginas da web. Os parágrafos são definidos com tags <p>.

As tags de parágrafo são muito básicas e geralmente são as primeiras tags que você precisa para publicar texto em uma página da web. Aqui está um exemplo:

<p>Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>

Nota: A folha de estilo integrada do navegador cria automaticamente algum espaço (chamado margin) acima e abaixo do conteúdo do parágrafo, mas você pode substituí-lo por CSS.

fechar elemento de parágrafo

No HTML 4 e anteriores, bastava iniciar um novo parágrafo com uma tag de abertura. A maioria dos navegadores exibirá o HTML corretamente mesmo se você esquecer a tag de fechamento. Por exemplo:

<p>Este é um parágrafo.
<p>Este é outro parágrafo.

O código HTML no exemplo acima funcionará na maioria dos navegadores da Web, mas não confie nele. Esquecer as tags de fechamento pode produzir resultados ou erros inesperados.

Nota: Para compatibilidade futura e boas práticas de programação, é recomendável usar tags de abertura e fechamento para parágrafos.

Criar novas linhas

A tag <br> é usada para inserir quebras de linha em páginas da web.

Como <br> é um elemento vazio, não há necessidade de uma tag </br> correspondente.

<p>Este é um parágrafo <br> com quebra de linha.</p>
<p>Este é <br>outro parágrafo<br> com quebras de linha.</p>

Nota: Não use parágrafos vazios, ou seja, <p></p> para adicionar espaço extra em sua página. Os navegadores podem ignorar parágrafos vazios porque é uma tag lógica. Use as propriedades de margem CSS para ajustar o espaço ao redor dos elementos.

Crie regras horizontais

Você pode usar as tags <hr> para criar linhas ou linhas horizontais para separar visualmente seções de conteúdo em uma página da web. Assim como <br>, a tag <hr> é um elemento vazio. Aqui está um exemplo:

<p>Este é um parágrafo.</p>
<hr>
<p>Este é outro parágrafo.</p>

Gerenciar espaços em branco

Normalmente, os navegadores exibem vários espaços criados no código HTML como um único espaço pressionando a barra de espaço ou a tecla Tab no teclado. Várias quebras de linha criadas no código HTML pressionando Enter também aparecem como um único espaço.

Os parágrafos a seguir aparecerão em uma linha sem espaços extras:

<p>Este parágrafo contém vários espaços no código-fonte.</p>
<p>
     Este parágrafo
     contém várias guias e quebras de linha
     no código-fonte.
</p>

Inserir para criar espaços extras consecutivos, enquanto insere tags <br> para criar quebras de linha em sua página web, como no exemplo a seguir:

<p>Este parágrafo tem vários&nbsp;&nbsp;&nbsp;espaços.</p>
<p>Este parágrafo tem várias<br><br>linhas<br><br><br>quebras.</p>

Definir texto pré-formatado

Às vezes, usar  , <br>, etc. para gerenciar espaços não é muito conveniente. Alternativamente, você pode usar a tag <pre> para exibir espaços, tabulações, quebras de linha, etc. exatamente como escrito no arquivo HTML. É muito útil na apresentação de texto onde espaços e quebras de linha são importantes, como poema ou código.

O exemplo a seguir exibirá o texto do código-fonte no navegador:

<pré>
     Brilha Brilha Estrelinha,
     Como eu me pergunto o que você é!
     Acima do mundo tão alto,
     Como um diamante no céu.
</pre>

Dica: O texto dentro do elemento <pre> geralmente é renderizado pelo navegador em uma fonte monoespaçada ou de largura fixa (como Courier), mas você pode substituir isso usando a propriedade CSS font.

Leia também: HTML 5: guia sobre títulos