< br /> e < p > - Quebra de linha e Parágrafos em HTML

Bom, agora que você já passou pela seção básica de HTML, já tem conhecimentos suficientes para entender como funciona a grande maioria dos websites da Internet, pois já estudou as principais tags (<html>, <head> e <body>), além de ter criado dezenas de site.
Agora vamos seguir em frente, e aprender mais detalhes desse interessante e crescente ramo profissional.

Nesse primeiro tutorial desta seção de Textos, do nosso curso de HTML, vamos aprender a escrever em HTML.
Sim, aprender a escrever. Escrever textos em um site é diferente, ou estava pensando que era igual a usar o Word?


Um site não é um editor de texto

Se acompanhou corretamente nossos tutoriais de HTML, fez todos os exercícios e repetiu os exemplos, você já tem a perfeita noção que HTML são um punhado enorme de códigos e mais códigos.

Já deve ter notado também que esses códigos são uma maneira de se comunicar com os navegadores (ou browsers).
Não é à toa que o L de HTML é de "language", pois é uma linguagem, é uma maneira diferente de se 'conversar'.

Neste artigo vamos ter mais uma prova que HTML é uma linguagem diferente.
Não é como escrever em um chat ou em um editor de textos.
Pode estar sendo confuso, mas você vai entender agora o que estamos falando, exatamente.

Vamos pegar uma letra de uma música, da abertura do antigo desenho "Cavalo de Fogo", ela é assim:
No meu sonho eu já vivi
Um lindo conto infantil
 
Tudo era magia,
Era um mundo fora do meu
E ao chegar desse sono acordei
 
Foi quando correndo eu vi
Um cavalo de fogo alí
Que tocou meu coração
Quando me disse, então
Que um dia rainha eu seria
Se com a maldade pudesse acabar
No mundo dos sonhos pudesse chegar.
Você conseguiria escrever ela em um papel? Fácil, né.
E em um editor de textos, como o bloco de notas ou Word? Mais fácil e rápido ainda.
E no chat do Facebook? Mesma coisa, ué.

Pois vamos tentar escrever essa letra em um site, em HTML.
O código ficaria assim:
<!DOCTYPE html>
 
<html>
	<head>
  		<title> Letra - Cavalo de Fogo </title>
		<meta name="description" content="Confira a letra do desenho Cavalo de Fogo">
	</head>
 
	<body> 
 
		No meu sonho eu ja vivi
		Um lindo conto infantil
 
		Tudo era magia,
		Era um mundo fora do meu
		E ao chegar desse sono acordei
 
		Foi quando correndo eu vi
		Um cavalo de fogo ali
		Que tocou meu coracao
		Quando me disse, entao
		Que um dia rainha eu seria
		Se com a maldade pudesse acabar
		No mundo dos sonhos pudesse chegar.
 
	</body>
 
</html>
Agora vamos salvar esse código em um arquivo com extensão .htm ou .html, e vamos ver como a letra ficou. Verá que ficou da seguinte maneira (é preciso até clicar na figura para abrir e ver tudo):

Curso de HTML online grátis - Como criar sites
"Nossa, que bagunça!"
Por que está tudo na mesma linha?
Por que não pulou a linha, se demos enter?
E os parágrafos? O espaçamento? O que ocorreu?
Eu sou analfabeto?

Como dissemos, um site não é um editor de texto. As coisas não funcionam da mesma maneira.
Para o HTML, um enter que damos no código não quer dizer que demos um enter no conteúdo do site.
Temos que avisar ao HTML que deve haver uma quebra de linha ou um parágrafo de outra maneira.

Adivinha como?
Sim, usando códigos em HTML.
Mas especificamente, usando as tags <br /> e <p>

Quebras de linha em HTML - <br />

Para quebrar a linha, ou seja, para o HTML dar um salto de uma linha para outra (o que acontece quando damos enter em um editor de textos), basta usarmos a tag: <br />

O br vem do inglês break.
Você pode simplesmente usar a tag <br> para fazer uma quebra de linha, a qualquer momento.
Porém, deixar uma tag aberta pode causar alguns problemas. O XML, por exemplo, não aceita só uma tag aberta assim, e também há algumas questões de compatibilidade com o XHTML.
Para mais informações sobre essa discussão, acesse: http://stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br

Então, por via das dúvidas, é um bom hábito e recomendado você usar a tag assim: <br />
Pronto, agora vamos colocar a quebra de linha ao final de cada frase de nossa letra.
Nosso código ficará assim:
<!DOCTYPE html>
 
<html>
	<head>
  		<title> Letra - Cavalo de Fogo </title>
		<meta name="description" content="Confira a letra do desenho Cavalo de Fogo">
	</head>
 
	<body> 
 
		No meu sonho eu ja vivi<br />
		Um lindo conto infantil<br />
 
		Tudo era magia,<br />
		Era um mundo fora do meu<br />
		E ao chegar desse sono acordei<br />
 
		Foi quando correndo eu vi<br />
		Um cavalo de fogo ali<br />
		Que tocou meu coracao<br />
		Quando me disse, entao<br />
		Que um dia rainha eu seria<br />
		Se com a maldade pudesse acabar<br />
		No mundo dos sonhos pudesse chegar.<br />
 
	</body>
 
</html>
O resultado é o seguinte:
No meu sonho eu já vivi
Um lindo conto infantil
Tudo era magia,
Era um mundo fora do meu
E ao chegar desse sono acordei
Foi quando correndo eu vi
Um cavalo de fogo ali
Que tocou meu coração
Quando me disse, então
Que um dia rainha eu seria
Se com a maldade pudesse acabar
No mundo dos sonhos pudesse chegar.
Bem melhor, não?
Porém, se você notar bem o texto original, existem três parágrafos, que são um espaçamento maior.
Como fazer isso?

Bom, você pode dar duas quebras de linha em sequência, sem o menor problema.
O código ficaria:
<!DOCTYPE html>
 
<html>
	<head>
  		<title> Letra - Cavalo de Fogo </title>
		<meta name="description" content="Confira a letra do desenho Cavalo de Fogo">
	</head>
 
	<body> 
 
		No meu sonho eu ja vivi<br />
		Um lindo conto infantil<br /><br />
 
		Tudo era magia,<br />
		Era um mundo fora do meu<br />
		E ao chegar desse sono acordei<br /><br />
 
		Foi quando correndo eu vi<br />
		Um cavalo de fogo ali<br />
		Que tocou meu coracao<br />
		Quando me disse, entao<br />
		Que um dia rainha eu seria<br />
		Se com a maldade pudesse acabar<br />
		No mundo dos sonhos pudesse chegar.<br />
 
	</body>
 
</html>
E o resultado seria igual ao esperado.

É uma solução diferente e criativa. Como Webmaster, você verá que muitas vezes fazemos essas coisas, faz parte.
Porém, isso seria uma baita gambiarra.
Não precisamos dar duas ou mais quebras de linha para produzir um parágrafo.
Existe uma tag só pra isso. E como você é aluno de nosso curso, e usou a apostila HTML Progressivo, você não irá fazer essa gambiarra :)

Parágrafos em HTML - <p> e </p>

Sempre que quisermos que um trecho de um texto seja visto como parágrafo, devemos colocar tal texto entre as tags <p> e </p>, e o navegador irá se encarregar de dispor o parágrafo da melhor maneira possível.

Lembrando que parágrafo é uma coisa, quebra de linha é outra.
Você deverá continuar a colocar as tags <br /> ao final de cada linha, em nossa música.

Tenha em mente que parágrafos são espaçamentos maiores que uma simples quebra de linha, eles servem para organizar melhor a disposição do seu texto.
E nem sempre um parágrafo é um conjunto de linhas. Existem parágrafos com somente uma palavra ou uma linha.

Para ilustrar isso, vamos colocar o nome da música no nosso código, será a primeira linha a ser exibida, e vamos envolvê entre as tags <p> e </p>, bem como o restante da música.

Veja como ficaria o nosso código HTML da letra, totalmente formatada para ser exibida em um site:
<!DOCTYPE html>
 
<html>
	<head>
  		<title> Letra - Cavalo de Fogo </title>
		<meta name="description" content="Confira a letra do desenho Cavalo de Fogo">
	</head>
 
	<body> 
  		<p>Cavalo de fogo</p>
 
		<p>No meu sonho eu ja vivi<br />
		Um lindo conto infantil<br /></p>
 
		<p>Tudo era magia,<br />
		Era um mundo fora do meu<br />
		E ao chegar desse sono acordei<br /></p>
 
		<p>Foi quando correndo eu vi<br />
		Um cavalo de fogo ali<br />
		Que tocou meu coracao<br />
		Quando me disse, entao<br />
		Que um dia rainha eu seria<br />
		Se com a maldade pudesse acabar<br />
		No mundo dos sonhos pudesse chegar.</p>
 
	</body>
 
</html>
Pronto! Bacana não?
Agora você já é capaz de criar um site de letras de música :)

Exercício de HTML

Crie um site com a letra de sua música favorita.
Use parágrafos para separar os trechos da música, e as quebras de linha.
Não esqueça de fazer um cabeçalho bonito, com o nome da banda, música e álbum da música em questão. Faça também uma descrição para sua página e um título.

Terminada esta lição de HTML, dê uma pausa e relembre sua infância:

5 comentários:

KBLO disse...

Grato, foi útil e muito claro para o aprendizado.

Anônimo disse...

Muito bom....ótimo artigo que ajudou muito. Abraços

Tio Sam Tutoriais disse...

Fiz um parágrafo como está no site e coloquei uma id para poder posicioná-los com a tag style como eu quiser dentro do site,só que não sai do mesmo lugar,como faço!!!

Max Guimaraes disse...

Tentei utilizar o esquema das tags < p > para QUEBRAR UMA LINHA NO TÍTULO DE MEU BLOG (que está no cabeçalho) mas não funcionou: deu erro no código HTML.
O quê fiz de errado?
Supondo que "A" seja qq caractere maiúsculo e "a", minúsculo,
1) Exemplo do título SEM a quebra de linha:
AAAAAAA AAAAA - Aaaa Aaaaaaa Aaaaaa
(É assim que está, com um hífen separando as palavras, neste caso, a quebra inclusive teria a utilidade de não usar o hifen.

2) Exemplo do título COM a quebra de linha:

AAAAAAA AAAAA
Aaaa Aaaaaaa Aaaaaa




Flávio da Cunha Guimarães disse...

Era o que estava precisando. É demais. Gostei e já recomendei no G +.
Obrigado por deixar de maneira tão clara para quem é leigo como eu.