Cursos WebHTMLTutoriais

Parágrafos HTML

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>

Em preto, o elemento <pre> aberto e fechado.

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.

Nathalia Santos

Cursos voltados para a área de Informática com Web Designer, Montagem e Manutenção de Computadores. Formada em Análise e Desenvolvimento de Sistemas desde 2018. Experiência em Suporte ao usuário. Adoro ler fantasias, escutar músicas, assistir série, tomar café e escrever códigos.

Artigos relacionados

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Verifique também
Fechar
Botão Voltar ao topo