Já vimos essa tag algumas vezes, mas é bom ter um tópico somente para ela, assim podemos de algumas coisas interessantes que a envolvem.
Como já falamos anteriormente, a tag <p> define um parágrafo. E quando ela é utilizada, alguns navegadores costumam adicionar um espaço em branco (uma margem) antes e depois do parágrafo.
<p>Este é um parágrafo.</p> <p>Este é outro parágrafo.</p>
Exibição do HTML
Nós nunca sabemos como o HTML será exibido. Telas maiores ou menores ou janelas redimensionadas. Cada uma irá criar um resultado diferente para o mesmo código.
No HTML, você não consegue alterar a saída de dados simplesmente adicionando espaços extras nas linhas de código HTML. O browser irá remover esses espaços extras quando página for exibida.
Exemplo
<p> Este parágrafo contém várias linhas na escrita do código, mas o browser, ignora essas linhas. </p> <p> Este parágrafo contém várias linhas e vários espaços na escrita de seu código, mas o browser também ignora as linhas e espaços. </p>
Este parágrafo contém várias linhas na escrita do código, mas o browser, ignora essas linhas.
Este parágrafo contém várias linhas e vários espaços na escrita de seu código, mas o browser também ignora as linhas e espaços.
Não se esqueça das tags de fechamento
A maioria dos browsers irão exibir o seu código HTML corretamente mesmo que você esqueça a tag de fechamento.
Mas não recomendamos que faça isso de propósito, pois pode causar algum erro inesperado no seu código.
Quebra de Linhas
O elemento HTML <br> serve para quebrar uma linha. Sempre que você quiser ter uma quebra de linha em um texto e não quiser começar um novo parágrafo, basta usar o elemento <br>.
Lembrando que a tag <br> é um elemento vazio, ou seja, não possui tag de fechamento.
Exemplo
<p>Este é um <br>parágrafo com <br>quebra de linhas.</p>
Este é um
parágrafo com
quebra de linhas.
O Problema do Poema
Mesmo que você escreva o seu poema dentro de uma tag <p> com todos os espaços e quebras de linhas, ele ainda aparecerá em um único parágrafo.
Exemplo
<p> Todos estes que aí estão Atravancando o meu caminho, Eles passarão. Eu passarinho! <p>
Todos estes que aí estão Atravancando o meu caminho, Eles passarão. Eu passarinho!
Mas e agora?
O Elemento <pre>
O elemento <pre> é utilizado para textos pré formatados.
Um texto dentro de uma tag <pre> irá ser exibido com uma largura (width) fixa, fonte (normalmente Courier) e preservar os espaços e quebras de linhas que foram adicionados do código.
Exemplo
<pre> Todos estes que aí estão Atravancando o meu caminho, Eles passarão. Eu passarinho! </pre>
Todos estes que aí estão Atravancando o meu caminho, Eles passarão. Eu passarinho!
Poema: “Poeminha do Contra” de Mario Quintana.
